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.

cossbyCcoss

Loading preview...

import { Field, FieldDescription, FieldLabel } from "@/components/ui/component";
import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "@/components/ui/select";
const items = [
  { label: "Select a country", value: null },
  { label: "United States", value: "us" },
  { label: "United Kingdom", value: "uk" },
  { label: "Canada", value: "ca" },
  { label: "Australia", value: "au" },
];
export default function FieldSelectDemo() {
  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>Country</FieldLabel>
          <Select items={items}>
            <SelectTrigger><SelectValue /></SelectTrigger>
            <SelectPopup>
              {items.map(({ label, value }) => (
                <SelectItem key={String(value)} value={value}>{label}</SelectItem>
              ))}
            </SelectPopup>
          </Select>
          <FieldDescription>This is an optional field</FieldDescription>
        </Field>
      </div>
    </div>
  );
}