Label

A label is the text caption for a form control. Use it to name an input, select, checkbox, or switch, and associate it with htmlFor so clicking the label focuses the control.

Preview

Installation

npx shadcn@latest add @cubby-ui/label

Usage

import { Label } from "@/components/ui/cubby-ui/label";

<Label />

Accessibility

Set htmlFor to the id of the control the label names. This lets assistive technology announce the label when the control is focused, and lets users click the label to focus the control.

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

API Reference

The Label component is a styled native HTML <label> element. All standard label attributes are supported.