Label

Renders an accessible label associated with controls.

Accept terms and conditions

<Field orientation="horizontal">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</Field>

Installation

pnpm dlx cubix@latest add label --base aria

Usage

Import

import { Label } from "@/components/cubix/label"

Example

<Label htmlFor="email">Your email address</Label>

With Checkbox

Accept terms and conditions

<Field orientation="horizontal">
  <Checkbox id="label-demo-terms" />
  <Label htmlFor="label-demo-terms">Accept terms and conditions</Label>
</Field>

With Input

<Field className="w-full max-w-xs">
  <Label htmlFor="label-demo-username">Username</Label>
  <Input id="label-demo-username" placeholder="Username" />
</Field>

Disabled

Set data-disabled on a parent group such as Field to dim the label with a disabled control.

<Field className="w-full max-w-xs" data-disabled={true}>
  <Label htmlFor="label-demo-disabled">Disabled</Label>
  <Input id="label-demo-disabled" placeholder="Disabled" disabled />
</Field>

With Textarea

<Field className="w-full max-w-xs">
  <Label htmlFor="label-demo-message">Message</Label>
  <Textarea id="label-demo-message" placeholder="Message" />
</Field>

API Reference

Label

Prop	Type	Default	Description
htmlFor	string	-	The id of the control this label is associated with.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	The label text or content.