Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Label
description: Renders an accessible label associated with a control.
---

```astro live props={{ name: 'label' }}
---
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
---

<div class="grid w-full max-w-sm gap-2">
  <Label for="email">Email</Label>
  <Input id="email" type="email" placeholder="Enter your email" />
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/label
```

## Usage

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

```astro
<Label for="email">Email</Label>
```

## Notes

- Match `for` on `Label` with the target control `id`.
- Use `Label` directly for simple forms and one-off controls.
- When you need descriptions or validation, prefer
  [Field](/components/field/) and `FieldLabel`.

## Example

```astro
<Label for="terms">Accept terms and conditions</Label>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/label) for more information on props.