## Overview [#overview]
The **Label** component provides accessible, semantic labeling for form controls, automatically associating with form elements through the `htmlFor` prop to improve usability and screen reader support. Built on Radix UI, it features customizable sizes, orientation options, and flexible styling powered by class-variance-authority.
## Usage [#usage]
```tsx
import { Label } from "@tilt-legal/cubitt-components/primitives";
```
```tsx
```
## Examples [#examples]
### With input [#with-input]
```tsx
import { Label, LabelDescription, Input } from "@tilt-legal/cubitt-components/primitives";
;
```
### With switch [#with-switch]
```tsx
import { Label, Switch } from "@tilt-legal/cubitt-components/primitives";
;
```
### Orientations [#orientations]
```tsx
import { Label, Input, Checkbox } from "@tilt-legal/cubitt-components/primitives";
// Vertical orientation (default)
// Horizontal orientation
```
### With Select [#with-select]
```tsx
import {
Label,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@tilt-legal/cubitt-components/primitives";
const countryItems = [
{ label: "United States", value: "us" },
{ label: "Canada", value: "ca" },
{ label: "United Kingdom", value: "uk" },
];
;
```
### With Textarea [#with-textarea]
```tsx
import { Label, Textarea } from "@tilt-legal/cubitt-components/primitives";
;
```
## Props [#props]
### Label [#label]
| Prop | Type | Description |
| ------------- | ---------------------------------------------- | -------------------------------------------------------- |
| `htmlFor` | `string` | The id of the form control this label is associated with |
| `size` | `"xs" \| "sm" \| "default" \| "lg"` | The size of the label text and spacing |
| `orientation` | `"vertical" \| "horizontal"` | 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` | All other Radix label props |
### LabelDescription [#labeldescription]
Size-aware helper text rendered under the main label.
| Prop | Type | Description |
| ----------- | ----------------------------------- | ------------------------------------- |
| `size` | `"xs" \| "sm" \| "default" \| "lg"` | 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]
* **Always associate labels with form controls** using the `htmlFor` prop that matches the control's `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]
* **Prefer `htmlFor` association** over wrapping form controls when possible for cleaner markup
* **Use wrapping pattern** with orientation prop when you need the label to contain multiple elements
* **Maintain semantic meaning** - labels should always describe the purpose of their associated control