docs / core / label

Label

the name of a form control, click it and the control focuses. never a heading or a caption.

intensity · recedesrsc · server

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

above an Input or Select, beside a Checkbox, wired with htmlFormono for tokens, ids and machine namesnever a section heading or a captiondisabled dims the label only. disable the control too

a11y

a real <label> · htmlFor clicks through to the control · disabled sets data-disabledjest-axe
live demo · try it out

props

proptypedefaultnotes
htmlForstring—the control's id. clicking the label focuses it.
disabledbooleanfalsemuted, not-allowed styling and data-disabled. style only, disable the control too.
monobooleanfalsethe monospace family, for tokens, ids and machine names.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Input } from "@usva-ui/react/primitives/input";
import { Label } from "@usva-ui/react/primitives/label";

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="you@usva.dev" />