# Label

> Accessible form control labeling.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/label.json`

## Install

```tsx
import { Label } from "@aspyn-io/kit";
```

### Basic usage

Built on Radix Label: clicking focuses/toggles the paired control, and screen readers announce the association.

```tsx
<Label htmlFor="name">Full name</Label>
<Input id="name" />
```

### With any form control

```tsx
<div className="flex items-center gap-2">
  <Checkbox id="marketing" />
  <Label htmlFor="marketing">Send me product updates</Label>
</div>
```

### With a Field

Compose FieldLabel with FieldDescription and FieldError for a fully wired form row.

```tsx
<Field data-invalid>
  <FieldLabel htmlFor="workspace">Workspace URL</FieldLabel>
  <Input
    id="workspace"
    aria-invalid
    defaultValue="my workspace"
  />
  <FieldDescription>
    Used in your public links.
  </FieldDescription>
  <FieldError>Cannot contain spaces.</FieldError>
</Field>
```