# Label

Names a control.

> Every page: https://constella.aayush.cv/llms.txt

```tsx
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
```

## Installation

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

## Usage

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

```tsx
<Label htmlFor="email">Email</Label>
```

## Wrapping a Control

Put the control inside the label to associate them without an `id`.

```tsx
<Label>
  <Checkbox />
  Accept terms and conditions
</Label>
```

## Label in Field

For form fields, use [Field](https://constella.aayush.cv/docs/components/field/index.md). Its `FieldLabel` comes with `FieldDescription` and `FieldError`.

```tsx
<Field>
  <FieldLabel htmlFor="email">Your email address</FieldLabel>
  <Input id="email" />
</Field>
```

## API Reference

Takes every prop of `<label>`, plus `sx`, applied last. A field's own label part, like `SliderLabel`, shares its style through `labelStyles()`.