Label

Names a form control; clicking it focuses or toggles the control.

Code

import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"

<div className="flex items-center gap-2">
  <Checkbox id="terms" defaultChecked />
  <Label htmlFor="terms">I accept the terms of service</Label>
</div>

Examples

Example source

var P = window.PUI, h = React.createElement;
  ReactDOM.createRoot(document.getElementById('preview')).render(h('div', { className: 'pui-inline' },
    h(P.Checkbox, { id: 'terms', defaultChecked: true }),
    h(P.Label, { htmlFor: 'terms' }, 'I accept the terms of service')));

Usage

What you provide

htmlFor pointing to the control's id. Clicking the label focuses or toggles the control.
Sentence case, no colon: "Full name", not "Full Name:".
Optional fields: add "(optional)" in text-muted-foreground. Don't mark required fields with an asterisk.

Accessibility

Every control has a label that is programmatically associated with it (htmlFor / id, or FieldLabel inside Field).
Clicking or tapping the label focuses or toggles its control, so the label is part of the touch target.
Inside Field, optional fields show "(optional)" automatically; required fields also get required on the control.

Adapted from Magoo 1.6.0 by Marcelo Sales: Input "text" (input-text), Checkbox (checkbox). Magoo is educational guidance; test the behavior in your implementation.

API

Install with:

npx @aline-aroucha/pui add label

<Label htmlFor="id" />
<Control id="id" />

Label

Name	Type
`htmlFor`Required	`string`
The id of the control it names.
`children`Required	`ReactNode`
Sentence-case text, no colon.