Skip to content
Esc
navigateopen⌘Jpreview
On this page

Label

Renders an accessible label associated with controls.

import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';

export default function LabelDemo() {
  return (
    <Label>
      <Checkbox /> Accept terms and conditions
    </Label>
  );
}

Install

npx shadcn@latest add @madeui/label

Usage

import { Label } from '@/components/ui/label';

API reference

A plain <label> element with library typography and inline-control spacing. Accepts all native label props (htmlFor, …) plus a style prop (StyleXStyles, merged last). Wrapping a control associates it without htmlFor.

Was this page helpful?