Label

Provides an accessible way to label form controls like inputs, textareas, selects, and checkboxes, enhancing usability and screen reader compatibility. Built upon the Radix UI Label primitive.

Docs API Reference

Accept terms and conditions

Component Installation Guide

npx shadcn@latest add label

Implementing the Label Component

<div>
  <Label htmlFor="email-input">Your email address</Label>
  <Input type="email" id="email-input" placeholder="you@example.com" />
</div>

The <Label> component renders an HTML <label> element. Crucially, use the htmlFor prop to associate the label with a specific form control. The value of htmlFor should match the id attribute of the corresponding input element (<Input>, <Checkbox>, <Select>, etc.). This association is vital for accessibility, allowing screen readers to announce the label when the input is focused and enabling users to focus the input by clicking on the label text.

Input OTP Menubar