Constella

Label

Names a control.

View as Markdown
<Checkbox id="terms" /><Label htmlFor="terms">Accept terms and conditions</Label>

Installation

$ npx shadcn@latest add @constella/label

Usage

import { Label } from "@/components/primitives/label";
<Label htmlFor="email">Email</Label>

Wrapping a Control

Put the control inside the label to associate them without an id.

<Label>  <Checkbox />  Accept terms and conditions</Label>

Label in Field

For form fields, use Field. Its FieldLabel comes with FieldDescription and FieldError.

<Field>  <FieldLabel htmlFor="email">Your email address</FieldLabel>  <Input id="email" /></Field>
Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

API Reference

Takes every prop of <label>, plus sx, applied last. A field's own label part, like SliderLabel, shares its style through labelStyles().