Label

Demos

A label for a text input.

"use client"

import { Input } from "@workspace/ui/components/input"
import { Label } from "@workspace/ui/components/label"

export function LabelDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Label htmlFor="label-demo-email">Email</Label>
      <Input id="label-demo-email" type="email" placeholder="you@example.com" />
    </div>
  )
}

Usage

Give every form control a label. Clicking the label focuses or toggles its control, and screen readers read it out when the control gets focus.

Import it from @workspace/ui/components/label.

Anatomy

Label — A native label element. It lays out its children in a row with a small gap, so it can hold a control and its text.

Notes

Link the label to its control with htmlFor and a matching id, or put the control inside the label.
The label dims when a disabled control with the peer class comes before it, or when it sits inside a group with data-disabled="true".
Write labels as short nouns, such as "Email" or "Date of birth". Put hints in a separate line of text.

Examples

With a control

Wrap a switch, radio, or checkbox in the label so the whole row is clickable.

Share results with my clinician

"use client"

import { Label } from "@workspace/ui/components/label"
import { Switch } from "@workspace/ui/components/switch"

export function LabelWithControl() {
  return (
    <Label>
      <Switch defaultChecked />
      Share results with my clinician
    </Label>
  )
}

Disabled

Add peer to a disabled control placed before the label. Here flex-col-reverse keeps the label on top.

Patient ID

"use client"

import { Input } from "@workspace/ui/components/input"
import { Label } from "@workspace/ui/components/label"

export function LabelDisabled() {
  return (
    <div className="flex w-full max-w-xs flex-col-reverse gap-2">
      <Input
        id="label-disabled-id"
        className="peer"
        defaultValue="PRD-20481"
        disabled
      />
      <Label htmlFor="label-disabled-id">Patient ID</Label>
    </div>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the label element.

Label

Prop	Type	Default	Description
`htmlFor`	`string`	—	The `id` of the control it names.
`className`	`string`	—	Extra classes for the label.