Label

A styled <label> element for form fields.

When to use

Use Label when composing a custom form control that needs its own label. The higher-level fields (TextInput, Textarea, …) already render a Label internally via FormComponent, so you rarely need it directly.

There is no @uxf/form twin.

Usage

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

<Label htmlFor="email">Email</Label>;

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Label content.
`htmlFor`	`string`	—	`id` of the associated control.
`isRequired`	`boolean`	`false`	Marks the field required (adds the required styling).
`isHidden`	`boolean`	`false`	Visually hides the label (`sr-only`), keeping it for screen readers.
`isFocusable`	`boolean`	`false`	Adds `tabIndex={0}`.
`id`	`string`	—	`id` of the `<label>`.
`form`	`string`	—	Native `form` attribute.
`onClick`	`MouseEventHandler<HTMLLabelElement>`	—	Click handler.
`className`	`string`	—	Extra class on the `<label>`.

The forwarded ref points to the <label>.

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/label.css");

Default

Open in new tab