Form

Label

The visible name of a form control.

Import

import { Label } from "@booleanpress/ui/label"

Usage

Label renders a native label. Set htmlFor to the control's id: the label names the control, and clicking it focuses or toggles the control.

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

export function FromName() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="from-name">From name</Label>
      <Input id="from-name" />
    </div>
  )
}

Inside a Field, use FieldLabel, which is a Label with the field's layout. To dim a label when its control is disabled, put peer on the control and render the label after it, or set data-disabled="true" on a parent with the group class.

Examples

Basic

A label above a text input.

From name

With a checkbox

The label sits beside the box; clicking it toggles the box.

Keep the message body in the log

Disabled

The label dims with a disabled peer control, or inside a group marked data-disabled.

Retry failed sends

Retry limit

Accessibility

Semantics: A native label element. Radix Label also stops the text from being selected when it is double-clicked.
Labels: A label is the name. Keep its text short and specific, and unique on the page when the controls differ.
Focus: A label is not focusable. Clicking it moves focus to its control.
Known limits: A label without htmlFor (or a control inside it) names nothing.

Keyboard

Keyboard
Key	Behaviour

API

Label

Renders Radix Label.Root and passes it every other prop.

Label props
Prop	Type	Default	Description
`asChild`	`boolean`		Render the child element instead, with this part's behaviour and classes merged onto it.

Every part takes className, merged with its defaults by cn(), and ref, which reaches the element it renders.

Data attributes: data-slot="label" (Label).

Theming

The tokens its classes read. Change their values in your theme, and it follows.

Theme tokens
Token	Used for