ComponentsForms

Label

A caption for a form control, with a required marker.

Playground

<Label htmlFor="email">Email</Label>
<Input id="email" />

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Label } from "junco";

<Label htmlFor="email" isRequired>Email</Label>
<Input id="email" required />

Also takes every native <label> attribute.

htmlFor: Id of the control it labels.; string
isRequired: Shows a required marker (hidden from screen readers; set required on the control).; boolean; Default: false

Prop	Type	Default
`htmlFor` Id of the control it labels.	`string`	`–`
`isRequired` Shows a required marker (hidden from screen readers; set required on the control).	`boolean`	`false`

A real <label>: clicking it focuses or toggles its control.
The asterisk is decorative. Set required on the control so assistive tech announces it.
Dims automatically when the control right before it (peer) is disabled.