Primitives

Label

The visible name of one form control.

Email address

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. Put it to the right of a Checkbox or a Switch.
Field and FormRow add the label for you. Do not add a Label in a Field or in a FormRow of Form Card.
Not a caption. For text that names no control, use Mono Label or plain text.

Anatomy#

Import the component. A label has one part.

Anatomy

import { Label } from 'ferry-ui'

<Label />

Examples#

Link with htmlFor#

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

Two-factor authentication

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.

Remember this device

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 have this class.

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

Send the weekly digest

Billing email

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.

I agree that the team uses my usage data to make the product better, as the privacy policy describes.

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
`asChild`	boolean	-
See the element or the Radix UI primitive this part renders.