primitives

Label

Form-control label. Always pair with the input it describes via `htmlFor` — even when visually hidden.

Built on Radix Label primitive. Automatically dims and disables clicks when the associated peer input is disabled (via `peer-disabled:` modifiers).

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/label.json

Or import from the workspace package:

import { Label } from "@8maverik8/design";

Accept the terms

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept the terms</Label>
</div>

Use `htmlFor` matching the input's `id`.Required for screen readers and click-to-focus.
Use a `<span>` or `<div>` styled like a label.You lose all the a11y semantics that come for free.
Use `sr-only` if you want the label visually hidden — never omit it.