## Overview [#overview]
The **Label** component renders a semantic native `label` for form controls. Wrap the control when the label owns a small inline or vertical field composition, or use `htmlFor` when the label and control need to stay separate.
## Usage [#usage]
```tsx
import { Input } from "@tilt-legal/cubitt-components/input";
import { Label } from "@tilt-legal/cubitt-components/label";
```
```tsx
```
## Examples [#examples]
### With input [#with-input]
```tsx
import { Input } from "@tilt-legal/cubitt-components/input";
import {
Label,
LabelDescription,
} from "@tilt-legal/cubitt-components/label";
;
```
### With switch [#with-switch]
```tsx
import { Label } from "@tilt-legal/cubitt-components/label";
import { Switch } from "@tilt-legal/cubitt-components/switch";
;
```
### Sizes [#sizes]
```tsx
import { Checkbox } from "@tilt-legal/cubitt-components/checkbox";
import { Label } from "@tilt-legal/cubitt-components/label";
;
```
### Orientations [#orientations]
```tsx
import { Checkbox } from "@tilt-legal/cubitt-components/checkbox";
import { Input } from "@tilt-legal/cubitt-components/input";
import { Label } from "@tilt-legal/cubitt-components/label";
// Vertical orientation (default)
// Horizontal orientation
```
### With Select [#with-select]
```tsx
import { Label } from "@tilt-legal/cubitt-components/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@tilt-legal/cubitt-components/select";
const countryItems = [
{ label: "United States", value: "us" },
{ label: "Canada", value: "ca" },
{ label: "United Kingdom", value: "uk" },
];
;
```
### With Textarea [#with-textarea]
```tsx
import { Label } from "@tilt-legal/cubitt-components/label";
import { Textarea } from "@tilt-legal/cubitt-components/textarea";
;
```
## Props [#props]
### Label [#label]
| Prop | Type | Default | Description |
| ------------- | ------------------------------- | ------------ | -------------------------------------------------------- |
| `htmlFor` | `string` | - | The id of the form control this label is associated with |
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` | The size of the label text and spacing |
| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Layout direction for label content |
| `className` | `string` | - | Additional CSS classes to apply to the label |
| `children` | `React.ReactNode` | - | The content of the label |
| `...props` | `React.ComponentProps<"label">` | - | Native label props |
### LabelDescription [#labeldescription]
Size-aware helper text rendered under the main label.
| Prop | Type | Default | Description |
| ----------- | ------------------------------ | ------- | ------------------------------------- |
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` | Matches the parent label/control size |
| `className` | `string` | - | Additional CSS classes |
| `children` | `React.ReactNode` | - | Description content |
## Design Guidelines [#design-guidelines]
### Accessibility and association [#accessibility-and-association]
* **Associate labels with form controls** by wrapping the control or using `htmlFor` with a matching control `id`
* **Use descriptive text** that clearly explains what the associated control is for
* **Avoid placeholder-only forms** - labels should always be visible, not just placeholder text
* **Use sentence case** rather than title case for better readability
### Layout and positioning [#layout-and-positioning]
* **Use vertical orientation** for traditional form fields (inputs, selects, textareas) to improve scanability
* **Use horizontal orientation** for checkboxes, radio buttons, and switches to maintain natural reading flow
* **Use consistent spacing** between labels and their associated controls - the component handles appropriate gap sizes automatically
* **Align labels left** for better readability in forms
### Sizing [#sizing]
* **Use consistent sizes** throughout your form for visual hierarchy
* **Match label size** with the associated form control size when possible
* **Use smaller sizes (xs, sm)** for compact forms or secondary information
* **Use larger sizes (lg)** for prominent form fields or headings
### Best practices [#best-practices]
* **Use wrapping** when the label owns a compact checkbox, radio, switch, or vertical field composition
* **Use `htmlFor` association** when the label and control are separate siblings
* **Maintain semantic meaning** - labels should always describe the purpose of their associated control