Label

Installation

npx shadcn@latest add @fujin/label

Usage

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

<Label>
  <Checkbox name="receipts" />
  Email me a receipt for every order
</Label>

Wrap Base UI controls (Checkbox, Switch) rather than pointing htmlFor at them: they render a <span> plus a hidden input, so htmlFor would target the hidden input. htmlFor is fine for native <input> and <select>.

Inside a <Field>, use FieldLabel instead - it is linked to the control and reflects the field's invalid and disabled state.

Disabled state

The label dims when the control before it is disabled (peer), or when an ancestor group has data-disabled. When it wraps a disabled control it mutes its text instead, because the control already lowers its own opacity.

What's different from shadcn/ui

shadcn's Label wraps Radix's label primitive. Fujin's is a plain <label> with no "use client", so it works in Server Components.

API Reference

Label takes every <label> attribute.