# Field (/docs/components/field)



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

## Overview [#overview]

Use Field to wrap a form control with a label, description, validation message, and disabled or invalid state.

Field keeps form layout consistent and helps connect supporting text to the control.

## Anatomy [#anatomy]

A field usually includes a label, control, description, and error message. The control can be an input, textarea, select, checkbox, radio group, slider, switch, combobox, or custom form element.

## Behavior [#behavior]

Use required, disabled, invalid, and validity states to match the real form state. Keep validation messages close to the control they explain.

## Accessibility [#accessibility]

Field is most useful when it connects labels, descriptions, and errors in a way screen readers can understand. Use clear labels and specific error messages.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add field
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      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 [#usage]

```tsx
import {
  Field,
  FieldControl,
  FieldDescription,
  FieldError,
  FieldLabel,
  FieldValidity,
} from "@/components/ui/field"
```

```tsx
<Field>
  <FieldLabel>Name</FieldLabel>
  <FieldControl 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 [#examples]

The examples show Field with required, disabled, error, validity, and many different form controls.

### Required Field [#required-field]

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

### Disabled Field [#disabled-field]

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

### With Error [#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 [#with-validity]

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

### Autocomplete Field [#autocomplete-field]

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

### Combobox Field [#combobox-field]

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

### Combobox Multiple Field [#combobox-multiple-field]

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

### Textarea Field [#textarea-field]

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

### Select Field [#select-field]

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

### Checkbox Field [#checkbox-field]

<ComponentPreview name="field-checkbox" />

### Checkbox Group Field [#checkbox-group-field]

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

### Radio Group Field [#radio-group-field]

<ComponentPreview name="field-radio" />

### Switch Field [#switch-field]

<ComponentPreview name="field-switch" />

### Slider Field [#slider-field]

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

### Number Field [#number-field]

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

### Complete Form Example [#complete-form-example]

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