Input Group

import { z } from 'zod';
import { AutoForm } from '@vitnode/core/components/form/auto-form';
import { AutoFormInput } from '@vitnode/core/components/form/fields/input';
import { AutoFormTextarea } from '@vitnode/core/components/form/fields/textarea';
import { InputGroupAddon, InputGroupText } from "@vitnode/core/components/ui/input-group";

const formSchema = z.object({
  search: z.string().min(1, "Search is required"),
  description: z
    .string()
    .max(500, "Description must be less than 500 characters"),
});

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: "search",
      component: props => (
        <AutoFormInput {...props} placeholder="Search..." label="Search">
          <InputGroupAddon>
            <Search />
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
        </AutoFormInput>
      ),
    },
    {
      id: "description",
      component: props => (
        <AutoFormTextarea
          {...props}
          className="min-h-24 resize-none"
          placeholder="I'm having an issue with the login button on mobile."
          rows={6}
        >
          <InputGroupAddon align="block-end">
            <InputGroupText className="tabular-nums">
              {props.field.value?.toString().length ?? 0} of 500 characters
            </InputGroupText>
          </InputGroupAddon>
        </AutoFormTextarea>
      ),
    },
  ]}
/>

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@vitnode/core/components/ui/input-group";
import { Search } from "lucide-react";

<div className="flex flex-col gap-8">
  <InputGroup className="max-w-xs">
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <Search />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupTextarea
      className="min-h-24 resize-none"
      placeholder="I'm having an issue with the login button on mobile."
      rows={6}
    />
    <InputGroupAddon align="block-end">
      <InputGroupText className="tabular-nums">
        0 of 500 characters
      </InputGroupText>
    </InputGroupAddon>
  </InputGroup>
</div>