Label

PreviewCopy Anchor Link

UsageCopy Anchor Link

import { Label } from '@vitnode/core/components/ui/label'

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />

Label is a styled native <label>. Point htmlFor at the control's id: the label becomes a click target and screen readers read it on focus.

With a checkboxCopy Anchor Link

Put the control first. Gap and alignment are built in.

<div className="flex items-center gap-3">
  <Checkbox id="terms" />
  <Label htmlFor="terms">I promise I read the terms</Label>
</div>

Wrapping the controlCopy Anchor Link

No id handy? Wrap the control. A <label> names whatever is inside it.

<Label>
  <Checkbox />
  Remember me
</Label>

Disabled controlsCopy Anchor Link

A disabled control dims its label and shows a not-allowed cursor, as in the preview's last row.

<div className="flex items-center gap-3">
  <Checkbox disabled id="newsletter" />
  <Label htmlFor="newsletter">Weekly newsletter (coming soon)</Label>
</div>

This needs the control before the label, as a sibling with the peer class. Checkbox, Switch and RadioGroupItem already have it. Label elsewhere? Put group and data-disabled="true" on a shared parent, which is what Field does.

AccessibilityCopy Anchor Link

• Always connect label and control, with htmlFor + id or by wrapping. A label merely next to an input is plain text to a screen reader.
• Placeholders are not labels. They vanish as soon as someone types.
• The label is part of the hit area, so keep it right next to small controls.

PropsCopy Anchor Link

Accepts every native <label> prop.

API ReferenceCopy Anchor Link

MDN - The Label element