Field

A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

Cby coss

Install

npx shadcn@latest add https://21st.dev/r/coss.com/field

Loading preview...

import { ArrowRightIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Field, FieldError, FieldLabel } from "@/components/ui/component";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
export default function FieldInputGroupDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <div className="w-full max-w-sm">
        <Field>
          <FieldLabel>Subscribe</FieldLabel>
          <InputGroup>
            <InputGroupInput placeholder="Your best email" type="email" />
            <InputGroupAddon align="inline-end">
              <Button aria-label="Subscribe" size="icon-xs" variant="ghost">
                <ArrowRightIcon aria-hidden="true" />
              </Button>
            </InputGroupAddon>
          </InputGroup>
          <FieldError>Please enter a valid email address.</FieldError>
        </Field>
      </div>
    </div>
  );
}