zeroUI

Label

A control's name outside a Field, in the Field label's leaning type.

Install

terminal
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/label

Examples

Beside a checkbox and a switch

label-basic.tsx
import { Checkbox } from "@/components/zero/checkbox";import { Label } from "@/components/zero/label";import { Switch } from "@/components/zero/switch";export default function LabelBasic() {  return (    <div className="grid gap-4">      <Label>        <Checkbox defaultChecked />        Rush jobs only      </Label>      <Label>        <Switch />        Radio on      </Label>      <Label>        <Checkbox disabled />        Locked jobs (none today)      </Label>    </div>  );}

Behaviour

Wrap the control in it, or point at it with htmlFor. It dims with a disabled control inside it. Inside a Field, use FieldLabel, which also follows focus and errors.

Props

Label