Components

Field

Fields group form controls with labels, descriptions, and validation messages to provide clear context and accessibility.

Stable

GitHub Figma

Name

Enter your full name.

Anatomy

import {Field, TextField} from '@staffbase/design';

<Field.Root>
  <Field.Label />
  <Field.Description />
  {/* Form control goes here */}
  <Field.Error />
</Field.Root>

Examples

Required label

Email(Required)

Invalid state

Password

Password must be at least 8 characters.

API reference

Root

Inherits props fromBase UI Field Root

Provides field context that links labels, descriptions, and error messages to form controls.

Name	Type	Description
`children`	`ReactNode`	The field content, usually a label, control, optional description, and optional error.

Label

Inherits props fromBase UI Field Label

Name	Type	Description
`children`	`ReactNode`	The visible label text for the associated control.
`requiredLabel`	`string`	Optional text rendered in parentheses after the label to indicate required input.