Label

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

import { Input } from "@tilt-legal/cubitt-components/input";
import { Label } from "@tilt-legal/cubitt-components/label";

<Label>
  Email
  <Input type="email" placeholder="Enter your email" />
</Label>

Examples

With input

import { Input } from "@tilt-legal/cubitt-components/input";
import {
  Label,
  LabelDescription,
} from "@tilt-legal/cubitt-components/label";

<Label orientation="vertical">
  Email
  <LabelDescription>We’ll never share your email.</LabelDescription>
  <Input type="email" placeholder="Enter your email" />
</Label>;

With switch

import { Label } from "@tilt-legal/cubitt-components/label";
import { Switch } from "@tilt-legal/cubitt-components/switch";

<Label orientation="horizontal">
  <Switch />
  Enable notifications
</Label>;

Sizes

import { Checkbox } from "@tilt-legal/cubitt-components/checkbox";
import { Label } from "@tilt-legal/cubitt-components/label";

<div className="flex flex-col items-center justify-center gap-4">
  <Label orientation="horizontal" size="sm">
    <Checkbox defaultChecked size="sm" />
    Accept terms and conditions
  </Label>
  <Label orientation="horizontal">
    <Checkbox defaultChecked />
    Accept terms and conditions
  </Label>
  <Label orientation="horizontal" size="lg">
    <Checkbox defaultChecked size="lg" />
    Accept terms and conditions
  </Label>
</div>;

Orientations

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)
<Label orientation="vertical">
  Vertical orientation
  <LabelDescription>Optional helper text</LabelDescription>
  <Input type="email" placeholder="Enter your email" />
</Label>

// Horizontal orientation
<Label orientation="horizontal">
  <Checkbox />
  Horizontal orientation
</Label>

With Select

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" },
];

<Label>
  Country
  <Select items={countryItems}>
    <SelectTrigger>
      <SelectValue placeholder="Select a country" />
    </SelectTrigger>
    <SelectContent>
      {countryItems.map((item) => (
        <SelectItem key={item.value} value={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
</Label>;

With Textarea

import { Label } from "@tilt-legal/cubitt-components/label";
import { Textarea } from "@tilt-legal/cubitt-components/textarea";

<Label>
  Message
  <Textarea placeholder="Type your message here..." />
</Label>;

Props

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

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

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

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

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

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

Label

On this page