# Field

Label, control and help text as one unit, so they read, validate and announce together.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/field
```

## Usage

```tsx
import { Field } from '@/components/fetaui/field'
import { Input } from '@/components/fetaui/input'

export function Example() {
  return (
    <Field label="Email" description="We will send a receipt.">
      <Input type="email" />
    </Field>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| label | ReactNode | required |
| description | ReactNode |  |
| error | ReactNode |  |
| valid | boolean | false |
| required | boolean | false |
| disabled | boolean | false |
| horizontal | boolean | false |
| labelProps | Label props |  |
| animated | boolean | true |

## When to use

- Around every Input, Textarea, Select and Combobox in a form.
- Horizontal on wide settings pages.

## When not to use

- For several related fields alone: group them with Fieldset.

## Accessibility

- The label targets the control, and aria-describedby links the help or error.
- aria-invalid is set when there is an error.
- The error is announced as it appears.

## Motion

- The error slides in from 4 px above in 180 ms. Nothing shakes.
- The check scales in once the value is valid.
- With reduced motion, messages appear in place.