Skip to content
garn

Label

An accessible caption that names a form control.

Stablev0.4.2added in v0.1.0@garn/ui/label
On this page

Default

Label associated with an input.

Sizing

Text size; match it to the paired control's size.

Installation

garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.

terminal
npx garn-ui add label
First time? Set up garn in your project
Registry
label
Deps
@radix-ui/react-labelclass-variance-authority
Registry deps
utils

Import

import { Label } from "@garn/ui/label";

Props

The component's public props and their types.

size
Description
No description.
Type
"lg" | "md" | "sm"
Default
md

Plus 283 inherited native <label> attributes.

Styling

Target these data-slots and states, and remap these tokens, to restyle without forking the component.

[data-slot="label"]

States

SelectorState
:has(~ :disabled), .peer:disabled ~ &peer-disabled

When to use

Caption a form control so clicking the text focuses it and screen readers announce its name.

Reach for something else when

  • Section headings or non-control text — use a heading or plain text, not a <label>.

Overview

Label captions a form control so clicking the text focuses the control and assistive tech announces its accessible name. It's the connective tissue of every form: Input, Select, Checkbox, Radio, Switch, and Textarea all expect one. It is not a general text style — for section titles use a heading, for help text use a description element.

Guidelines

Associate every label with its control. Use htmlFor/id (or wrap the control) so the link is real, not just visual proximity — that's what makes the text a click target and gives the field its name. An unassociated label is invisible to screen readers.

Keep labels short, persistent, and in sentence case. A few words naming the field, always visible — don't rely on a placeholder that disappears on focus. Mark optionality explicitly ("(optional)") rather than assuming required-by-default.

Don't borrow the label for styling. If you want bold body text or a section heading, use the right element; a stray <label> with no control is an accessibility smell. Put requirements and examples in a separate description, not baked into the label.

Best practices

Do
  • Set htmlFor to the control's id (or wrap the control in the label).
  • Keep labels short and persistent — don't rely on a placeholder as the label.
Don't
  • Don't use a label as a generic text style.
  • Don't leave a label unassociated from any control.

Content guidelines

  • Use a short noun phrase in sentence case (“Email address”), not a sentence or question.
  • Don't add a trailing colon or other end punctuation.
  • State optionality in words when it matters (“Phone (optional)”) rather than a bare asterisk.

Accessibility

Role
label

Accessibility requirements

warn

Associate the label with a control (htmlFor matching the control id, or wrap it).

when the label has no `htmlFor` and does not wrap a control

A1.3.1Info and RelationshipsA3.3.2Labels or Instructions
  • Associate with a control via `htmlFor`={control id}, or by wrapping the control.