# Label

The visible name of one form control.

```tsx
import { Input, Label } from 'ferry-ui'

export default function LabelHero() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="member-email">Email address</Label>
      <Input id="member-email" type="email" placeholder="maya@example.com" />
    </div>
  )
}
```

## Usage guidelines

- **One label for one control.** A click on the label moves the focus to the control or changes its state.
- **Above a field, beside a choice.** Put the label above an [Input](/docs/components/input). Put it to the right of a [Checkbox](/docs/components/checkbox) or a [Switch](/docs/components/switch).
- **Field and FormRow add the label for you.** Do not add a `Label` in a [Field](/docs/components/field) or in a `FormRow` of [Form Card](/docs/components/form-card).
- **Not a caption.** For text that names no control, use [Mono Label](/docs/components/mono-label) or plain text.

## Anatomy

Import the component. A label has one part.

```tsx title="Anatomy"

<Label />
```

## Examples

### Link with htmlFor

Give an `id` to the control. Pass the same value to `htmlFor`.

```tsx
import { Label, Switch } from 'ferry-ui'

export default function LabelHtmlFor() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="two-factor" defaultChecked />
      <Label htmlFor="two-factor">Two-factor authentication</Label>
    </div>
  )
}
```

### Wrap the control

Put the control in the label. Then `htmlFor` is not necessary.

The label is a row with a gap of 8px. The control and its text line up.

```tsx
import { Checkbox, Label } from 'ferry-ui'

export default function LabelWrap() {
  return (
    <Label>
      <Checkbox />
      Remember this device
    </Label>
  )
}
```

### Disabled control

The label shows at half opacity when it comes after a disabled control with the `peer` class. `Checkbox`, `Switch` and the `RadioGroupItem` of [Radio Group](/docs/components/radio-group) have this class.

For other controls, use a parent with the `group` class and `data-disabled="true"`.

```tsx
import { Checkbox, Input, Label } from 'ferry-ui'

export default function LabelDisabled() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <div className="flex items-center gap-2">
        <Checkbox id="weekly-digest" disabled />
        <Label htmlFor="weekly-digest">Send the weekly digest</Label>
      </div>
      <div data-disabled="true" className="group flex flex-col gap-2">
        <Label htmlFor="billing-contact">Billing email</Label>
        <Input id="billing-contact" disabled defaultValue="billing@example.com" />
      </div>
    </div>
  )
}
```

### Long text

A long label continues on the next line. To align the control with the first line, add `items-start` to the row.

```tsx
import { Checkbox, Label } from 'ferry-ui'

export default function LabelLong() {
  return (
    <div className="flex w-full max-w-sm items-start gap-2">
      <Checkbox id="usage-data" className="mt-0.5" />
      <Label htmlFor="usage-data">
        I agree that the team uses my usage data to make the product better, as the privacy policy describes.
      </Label>
    </div>
  )
}
```

## Accessibility

- The text of the label is the accessible name of the control.
- For a control with no visible text, pass `aria-label` to the control. Do not add a `Label`.
- A `Label` names one control. For a group of controls, pass `aria-label` or `aria-labelledby` to the group.

## API reference

`Label` also accepts the props of the Radix UI Label primitive and each attribute of the `<label>` element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` |  |  |