forms / stable

Label

Field label: 12px medium text, wired automatically inside React Aria fields.

LIVE PREVIEW

Loading preview…

When to use

Naming a form control — every input needs a visible label or an aria-label.
Inside TextField/Select etc. (wired automatically), or with `htmlFor` next to a bare Input.

Consider an alternative

Section titles or headings — use heading text styles.
Helper text — use the field description.

Import

import { Label } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


isRequired	boolean	—	Marks the field as required: appends a destructive `*`. Visual only — set `isRequired` on the control (TextField, Select, …) for `aria-required` and validation; TextField forwards its own `isRequired` here.
required	boolean	—	Radix compatibility: prefer `isRequired`.
elementType	string	—
render	DOMRenderFunction<"label", undefined>	—	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
children	ReactNode	—
className	string	—

Examples

Required

`isRequired` appends a destructive `*`. It is visual only: also set `isRequired` on the control for `aria-required` and validation. TextField, Select and the other Kit fields show the marker automatically.

<Label htmlFor="email" isRequired>Email</Label>
<Input id="email" type="email" required />

{/* Kit fields show the marker from their own isRequired */}
<TextField label="Company" isRequired />

With an input

Bare Input + Label pair, linked with `htmlFor`/`id`.

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />

Literal anatomy

Static component anatomy; bind events in the consuming app.

<Label>Name</Label>

Related components

TextField
Input ↗