Label

Import

import { Label } from "@rogo-technologies/ui/label";

Examples

The disabled styling is driven by the sibling control, not by a prop: the label dims when it follows an element marked peer that is :disabled. Order matters: Tailwind's peer-* only looks at preceding siblings, so put the control first in the DOM if you want that pairing.

Props

Label takes every prop a <label> takes; there are no variants.

Notes

This is a plain <label> rather than a Base UI wrapper on purpose: Base UI's label only works inside a Field.Root, and the Form layer here deliberately doesn't use Field, since FormField owns the id and error wiring instead.

It adds exactly one behavior over a bare <label>: double-clicking calls preventDefault() so the browser selects nothing instead of highlighting the surrounding text, which is what you want when a user double-clicks a label to get at the field. Your own onMouseDown runs first and can opt out by calling preventDefault() itself.

That guard steps aside when the double-click started inside a nested button, input, select, or textarea, so a label that wraps its control still lets the user select a word in it.

Guidelines

• Inside a form field, use FormLabel. It renders this component with htmlFor already pointed at the control and turns destructive when the field has an error.
• Give every control a real label, not placeholder text, since placeholders vanish on input and are skipped by some screen readers.
• htmlFor needs the id to reach a real element. Base UI's Checkbox and Switch put it on their hidden <input>, so labelling those works. A composite whose root renders no DOM (Select, DropdownMenu) swallows the id instead, and so does any custom component that doesn't forward id to its own DOM node. There htmlFor silently points at nothing: name the control with aria-label, or give the label an id and point the control at it with aria-labelledby.