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.
Markdown is supported.
Managed by workspace settings.
Send an update when this changes.
...propsBase UI Field.Root
Stacks label, control, helper text, and error. Pass invalid for externally controlled errors.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Root | — | Stacks label, control, helper text, and error. Pass invalid for externally controlled errors. |
...propsBase UI Field.Label
Persistent field label. Supports required, optional, and size for dense labels.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Label | — | Persistent field label. Supports required, optional, and size for dense labels. |
...propsBase UI Field.Description
Helper text below the control. It participates in aria-describedby.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Description | — | Helper text below the control. It participates in aria-describedby. |
...propsBase 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.Error | — | Inline validation message. Use match for Base UI validity states, or match={true} for external state. |
...propsBase UI Field.Item
Horizontal grouping for checkbox, radio, or switch rows inside a field.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Item | — | Horizontal grouping for checkbox, radio, or switch rows inside a field. |
...propsBase UI Field.Control
Optional native control primitive when you do not need Input or Textarea.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Control | — | Optional native control primitive when you do not need Input or Textarea. |
...propsBase UI Field.Validity
Render-prop access to the current Base UI field validity state.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Field.Validity | — | Render-prop access to the current Base UI field validity state. |