fetaUI
GitHub

Label

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

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/label
Playground
Kinds
Optional
We only use this for receipts.
New
Forgot?
12/40
Focus follows the control
States
Locked
Field
Invite
We send the invite here.
Checkbox
Address
Inline
Security
New

Sign in with your face or fingerprint.

Group
Billing addressThe address on your card statement.
Optional
Payment
Payment
The long number on the front.
Enter all 16 digits.
Three digits on the back.
Kind
Icons animation
Invalid
Disabled
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/label

Kinds

One extra on the label row: required, optional, a hint, a badge, an action or a count.

Optional
We only use this for receipts.
New
Forgot?
12/40
Invalid
Disabled
Motion

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.

Responsive behavior

  • 14 px on Web and 15 px on Mobile.

Performance

  • Motion only drives the focus dot and the one time shake. At rest nothing animates.
  • The hint waits 300 ms on hover, and its timer is cleared on leave and unmount.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import Label from @/components/fetaui/label. Inside Field you pass label and labelProps instead of rendering it yourself.
  • required only draws the asterisk. Set required on the control too, or use Field, which does both.
  • focused is manual outside Field: set it from the control's onFocus and onBlur.
  • Change the shake number to shake the row once after a failed submit. action needs either href or onClick.
/docs/components/label/markdown
PreviousTheme Toggle
NextInput

Related

FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.InputComponentThe single line text control: a pill on the tray fill that lifts onto the surface when focused.CheckboxComponentToggles between checked and not checked, with an indeterminate value for parents of a list.FieldsetComponentFields grouped under a legend, in an inset card on the tray.