Label

An accessible label that dims itself when its control is disabled.

Accept terms and conditions

Playground

Tweak the props, the preview and the code follow.

Email address

Props

children

control

required

disabled

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

npx @plumsydev/plum-ui add label

Also pulls in checkbox, input automatically.

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

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

Team name

Required markers, counters, and disabled styling for free.

Extends Radix Label.Root. Pass htmlFor to link it to a control.

Prop	Type	Default
`htmlFor` The id of the associated control.	`string`	`—`