Base
Components

Label

Names a field. Clicking it focuses the field.

shadcn/uiForms and inputs
shadcn/ui docs (opens in a new tab)Radix API (opens in a new tab)components/ui/label.tsx

Preview

Installation

It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.

npx shadcn@latest add label

Examples

Beside a control

Clicking the label toggles the switch.

Props

The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.

PropTypeDefault
htmlForstring–

Guidelines

Use it

  • Above every input, select, textarea and switch.
  • Short: a noun, not a sentence.

Don't

  • Leave a field without one, even when the layout makes it look obvious.

Used in

The screens in this Base that show it, found in the code.

Accessibility

  • htmlFor must match the field's id.