HelixTimelyCare Experience Design System
Light

Label

Renders an accessible label associated with controls.

Spec · from metadata

When to use

  • •Labeling form inputs outside of the Form component system
  • •Labeling standalone inputs, checkboxes, or switches
  • •Any visible label that needs to associate with an input via htmlFor

When not to use

  • •Inside a Form — use FormLabel instead, which extends Label with error state handling
  • •Non-input descriptive text — use plain text or a heading

Anti-patterns

Avoid<label className="text-sm font-medium">Email</label>
Prefer<Label htmlFor="email">Email</Label>

Use the Label component for consistent styling and Radix accessibility features.

Avoid<Form {...form}>
  <Label>Name</Label>
  ...
</Form>
Prefer<Form {...form}>
  <FormLabel>Name</FormLabel>
  ...
</Form>

Inside Form, use FormLabel which auto-links to the field and shows error styling.

Accessibility

  • Screen readerRenders as a Radix Label which outputs a native <label> element. Automatically associates with its input via htmlFor.
  • ContrastUses default foreground text. Disabled state reduces opacity to 0.5.

Token bindings

TokenCategoryUsage
text-sm font-mediumtypographyLabel text styling

Import

import { Label } from "@timelycare/helix-ui"

Props

interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
  htmlFor?: string
  className?: string
  children: React.ReactNode
}

Styling

PropertyValueTailwind
FontAdelle Sans Mediumfont-medium
Size14pxtext-sm
Line height14px (1:1)leading-none
ColorDefault texttext-foreground

States

StateImplementation
Defaulttext-foreground font-medium text-sm leading-none
Disabledpeer-disabled:opacity-70 peer-disabled:cursor-not-allowed
Errortext-destructive (via FormLabel or manual)

Common Patterns

Basic Label

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />

With Input (Stacked)

<div className="space-y-2">
  <Label htmlFor="name">Name</Label>
  <Input id="name" placeholder="Enter your name" />
</div>

With Checkbox

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

With Description

<div className="flex items-start gap-2">
  <Checkbox id="marketing" className="mt-0.5" />
  <div className="flex flex-col gap-1.5">
    <Label htmlFor="marketing">Marketing emails</Label>
    <p className="text-sm text-muted-foreground">
      Receive emails about new products.
    </p>
  </div>
</div>

Horizontal Layout

<div className="flex items-center gap-4">
  <Label htmlFor="name" className="w-16 shrink-0 text-right">Name</Label>
  <Input id="name" placeholder="Enter name" />
</div>

Required Field

<Label htmlFor="email">
  Email <span className="text-destructive">*</span>
</Label>

Accessibility

  • Built on Radix Label — links to associated input automatically
  • Clicking label focuses the associated input via htmlFor
  • Screen reader: announces label text when input is focused
  • No direct keyboard interaction
  • Use with all form inputs for accessibility compliance

Gotchas

ProblemSolution
Label not clickableMatch htmlFor to input id
Disabled label same opacityAdd peer to input, peer-disabled:opacity-70 to label
Label misaligned with checkboxUse items-center for single line, items-start with description
Font not mediumLabel requires explicit font-medium class
Line height too tallUse leading-none for form labels
Error state not showingUse FormLabel or manually add text-destructive

See Also

Last updated: February 9, 2026