# Label

The name of a control, tied to it so a click on the label focuses the field.

Tier: Free

## Installation

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

## Usage

```tsx
import { Label } from '@/components/fetaui/label'

export function Example() {
  return <Label htmlFor="email" required>Email</Label>
}
```

## API

| Prop | Type | Default |
|---|---|---|
| required | boolean | false |
| optional | string |  |
| hint | string |  |
| badge | string |  |
| action | { label, href, onClick } |  |
| count | { value, max } |  |
| focused | boolean | false |
| invalid | boolean | false |
| disabled | boolean | false |
| shake | number | 0 |
| animated | boolean | true |

## When to use

- On every control. Placeholders are not labels.
- Required when most fields are optional, Optional when most are required.

## When not to use

- For help text: use the description in Field.

## Accessibility

- A real label element tied to the control by htmlFor.
- The asterisk is hidden from screen readers. Field passes required on to its control. With Label alone, set required on the control yourself.
- The hint is reachable by keyboard and read as a description.

## Motion

- The focus dot grows in and the name slides right.
- Counter digits roll as people type.
- Invalid colour fades in over 150 ms. Change `shake` to shake the row once on a failed submit.
- With reduced motion, the dot appears, digits swap and there is no shake.