Marble UI
← Components

Field (Label / Description / Error)

Preview: Default

Shared field parts. Every form control composes these so labels, help and errors look identical.

Import

import { Label, Description, FieldError } from '@marbleui/ui'

Props

<Label>

No props of its own.

Also accepts React Aria props (2) and HTML element props (280).

<Description>

No props of its own.

Also accepts React Aria props (2) and HTML element props (278).

<FieldError>

No props of its own.

Also accepts React Aria props (76).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria FieldError · React Aria Label · React Aria Text. Follow the primitive's docs for the full keyboard map.

Usage notes

Shared building blocks for form controls: Label, Description, FieldError and the fieldLayout class. Use them when composing a custom control; the ready-made fields (TextField, Select, Checkbox and so on) already include them.

<TextField className={fieldLayout}>
  <Label>Workspace name</Label>
  <Input placeholder="Acme Inc." />
  <Description>Shown in invites and emails.</Description>
  <FieldError />
</TextField>
  • Use them inside a React Aria field (TextField, NumberField, Select and so on, from react-aria-components) so label, description and error are wired to the control automatically.
  • FieldError renders only when the field is invalid; pass children for a fixed message.
  • fieldLayout is a class string: a vertical stack with gap-1.5.
  • Inputs inside a custom field must be styled yourself; these parts do not style the input.
Example source · show
import { Input, TextField } from 'react-aria-components'
import { fieldShell } from '../lib/utils'
import { Description, FieldError, Label, fieldLayout } from './field'

export const styles = {
  Default: () => (
    <TextField className={`${fieldLayout} w-72`}>
      <Label>Workspace name</Label>
      <Input className={fieldShell({ className: 'px-3 outline-none' })} placeholder="Acme Inc." />
      <Description>Shown in invites and emails.</Description>
    </TextField>
  ),
  Invalid: () => (
    <TextField className={`${fieldLayout} w-72`} isInvalid defaultValue="acme">
      <Label>Subdomain</Label>
      <Input className={fieldShell({ isInvalid: true, className: 'px-3 outline-none' })} />
      <FieldError>That subdomain is already taken.</FieldError>
    </TextField>
  ),
}

Source: packages/ui/src/field/field.tsx

Catalog

Category
inputs
Priority
Foundation
Primitive
react-aria
React Aria
Label + Text + FieldError
Base UI
Field