Field
A composable form field pattern for labels, controls, descriptions, and errors.
Use your work email.
Controls
import { Field, FieldDescription, FieldLabel, Input } from "raft-ui";
<Field>
<FieldLabel />
<Input />
<FieldDescription />
</Field>Field owns the form copy structure. Keep the control itself narrow: use Input, Textarea, or another control inside it.
Visible to everyone in this server.
Shown to other workspace members.
Use your work email.
Email is required.
This field is locked.
Use FieldItem for choice controls where the label and helper copy should sit beside the control instead of above it.
Visible in the project switcher.
/
Use lowercase letters, numbers, and hyphens.
0/160
Markdown is supported.
Managed by workspace settings.
Send an update when this changes.
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Root | — | Stacks label, control, helper text, and error. Pass invalid for externally controlled errors. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Label | — | Persistent field label. Supports required, optional, and size for dense labels. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Description | — | Helper text below the control. It participates in aria-describedby. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Error | — | Inline validation message. Use match for Base UI validity states, or match={true} for external state. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Item | — | Horizontal grouping for checkbox, radio, or switch rows inside a field. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Control | — | Optional native control primitive when you do not need Input or Textarea. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Validity | — | Render-prop access to the current Base UI field validity state. |