FORMS

Label

Native <label> with the form-label typography baked in (text-xs font-semibold uppercase tracking-wider text-muted-foreground). Use it standalone when you don't need the structured wiring of FormField.

Import

import { Label, Input } from 'damo-ui'

Label + input pair

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

Props

Label props
PropTypeDefaultDescription
htmlForstring—Standard <label> association — when set, clicking the label focuses the field with the matching id.
childrenReactNode—Visible label text.
classNamestring—Tailwind classes are merged on top of the typography defaults.

Accessibility

  • Renders as a real <label>. Pair with a form control via htmlFor="controlId" matching the control's id — clicking the label then focuses the control.
  • Alternatively wrap the control directly inside the label (implicit association). Either pattern is announced correctly by screen readers.

When to reach for FormField

For most product forms, FormField is preferable: it auto-wires htmlFor, aria-describedby, and aria-invalid based on description / error props. Reach for the standalone Label only when you have a one-off layout that needs custom positioning.

← TextareaCheckbox →