forms / stable

FieldLabel

The label, description and error rows every Kit form control shares: 12px medium label, 12px tertiary help, 12px destructive error.

LIVE PREVIEW

Loading preview…

When to use

Building a custom field on a React Aria field component (TextField, ColorField…) so it matches Kit fields.
Most of the time you don't: Select, ComboBox, NumberField, SearchField and DatePicker take `label`, `description` and `errorMessage` props.

Consider an alternative

Section titles or headings — use a heading.
Standalone captions — use text-foreground-tertiary text.

Import

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

Props

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


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	—

Related exports

FieldDescription, FieldError

Examples

Field anatomy

Label, control, description, error — wired with aria-labelledby/-describedby by React Aria.

<TextField className={fieldStyles.root} isInvalid>
  <FieldLabel>Invoice reference</FieldLabel>
  <div className={fieldControlVariants()}><Input className={fieldInputClassName} /></div>
  <FieldDescription>Shown on the PDF.</FieldDescription>
  <FieldError>Enter a full reference.</FieldError>
</TextField>

Compact control

28px frame for filters and table cells.

<div className={fieldControlVariants({ size: "compact" })}>…</div>

Literal anatomy 1

Static component anatomy; bind events in the consuming app.

<FieldLabel>Name</FieldLabel>

Literal anatomy 2