# Label

Renders an accessible label associated with controls.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="label-demo">
  <div className="flex items-center justify-center gap-4 py-8">
    <Label htmlFor="terms">
      Accept terms and conditions
    </Label>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/label.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

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

export function MyComponent() {
  return (
    <div className="flex items-center space-x-2">
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  );
}
```

## Examples [#examples]

### With Input [#with-input]

<ComponentPreview name="input-with-label">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">
        Email
      </Label>

      <Input type="email" id="email" placeholder="Email" />
    </div>
  </div>
</ComponentPreview>

### With Checkbox [#with-checkbox]

<ComponentPreview name="checkbox-with-text">
  <div className="items-start flex space-x-2 py-8">
    <Checkbox id="terms1" className="mt-0.5" />

    <div className="grid gap-1.5 leading-none">
      <label htmlFor="terms1" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50">
        Accept terms and conditions
      </label>

      <div className="text-sm text-muted-foreground">
        You agree to our Terms of Service and Privacy Policy.
      </div>
    </div>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Label` component extends the standard HTML label element using Radix UI's `LabelPrimitive.Root`.

| Prop      | Type      | Description                                                                                          |
| --------- | --------- | ---------------------------------------------------------------------------------------------------- |
| `htmlFor` | `string`  | The id of the element the label is associated with.                                                  |
| `asChild` | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior. |