║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Field description: A component that provides labelling and validation for form controls.

links: doc: https://base-ui.com/react/components/field#api-reference

<ComponentPreview name="field-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/field

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="field" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" title="components/ui/field.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
  FieldValidity,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

<Field>
  <FieldLabel>Name</FieldLabel>
  <Input type="text" placeholder="Enter your name" />
  <FieldDescription>Visible on your profile</FieldDescription>
  <FieldError>Please enter a valid name</FieldError>
  <FieldValidity>
    {(validity) => (
      {validity.error && <p>{validity.error}</p>}
    )}
  </FieldValidity>
</Field>

Examples

Required Field

<ComponentPreview name="field-required" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Disabled Field

<ComponentPreview name="field-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Error

Enter an invalid email address and press enter to see the error.

<ComponentPreview name="field-error" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Validity

<ComponentPreview name="field-validity" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-80" />

Input Group

<ComponentPreview name="field-input-group" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Autocomplete Field

<ComponentPreview name="field-autocomplete" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Combobox Field

<ComponentPreview name="field-combobox" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Combobox Multiple Field

<ComponentPreview name="field-combobox-multiple" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Textarea Field

<ComponentPreview name="field-textarea" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Select Field

<ComponentPreview name="field-select" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Checkbox Field

<ComponentPreview name="field-checkbox" />

Checkbox Group Field

<ComponentPreview name="field-checkbox-group" />

Radio Group Field

<ComponentPreview name="field-radio" />

Switch Field

<ComponentPreview name="field-switch" />

Slider Field

<ComponentPreview name="field-slider" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Number Field

<ComponentPreview name="field-number-field" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Complete Form Example

<ComponentPreview name="field-complete-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║