Field
Form field wrapper with a label, helper text, an error message, and automatic accessibility linking to its control.
import { Field } from "@plexui/ui/components/Field";Examples
Overview
size
We'll never share your email with anyone else.
Please enter a valid email address.
With description
We'll never share your email with anyone else.
With error message
Please enter a valid email address
Required
Sizing
size
We'll never share your email with anyone else.
Please enter a valid email address.
Horizontal layout
orientation
Textarea
Write a short bio for your profile.
Select
Select your primary role.
Select a role...
Label action
Slider
Set your budget range ($200 – 800).
Fieldset
Address Information
We need your address to deliver your order.
Checkbox
Choose which notifications you'd like to receive.
Radio
Select your preferred plan.
Switch
Field group
Get notified when the assistant responds to requests that take time, like research or image generation.
Get notified when tasks you've created have updates.
Validation and Errors
Name is required
Please enter a valid email address
Render prop pattern
For controls that need explicit prop wiring, pass a function as children. The function receives { id, "aria-describedby", "aria-invalid" } which you spread onto the control.
<Field label="Email" errorMessage="Email is required">
{(fieldProps) => <Input {...fieldProps} placeholder="Enter email..." />}
</Field>Optical alignment
opticallyAlign="start"
We'll never share your email.
Please enter a valid email address.
Form example
Profile settings
Create project
Field configuration
Birthday input
Birthday with validation
Please enter a valid date.
Birthday segmented input
//
Birthday with selects
Month
Day
Year
API
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Label text for the field |
description | ReactNode | — | Helper text below the label; linked via aria-describedby |
errorMessage | ReactNode | — | Error message below the control; auto-sets aria-invalid on child |
labelAction | ReactNode | — | Content at the end of the label row, such as a link that acts on the field |
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | child's size, else "md" | Label font size; defaults to the child control's size |
required | boolean | false | Shows a required asterisk after the label (visual only) |
orientation | "vertical" | "horizontal" | "vertical" | Layout direction of label and control |
opticallyAlign | "start" | "end" | — | Applies optical alignment to the child control via negative margin using its gutter |
id | string | — | Override the auto-generated id used for htmlFor/aria linking |
children | ReactElement | (fieldProps) => ReactNode | — | Form control; receives id, aria-describedby and aria-invalid, plus aria-labelledby unless it has its own name. A render prop receives aria-labelledby to spread |
className | string | — | Applied to the root wrapper |
Styling
Field reads these component tokens. Override them at any scope to restyle it:
--field-error-color: error color (defaultvar(--color-text-danger-outline))--field-error-font-size: error font size (default0.75rem)--field-error-gap: error gap (defaultspacing(2))--field-error-icon-size: error icon size (default1rem)--field-error-line-height: error line height (defaultvar(--font-text-xs-line-height))--field-error-margin-bottom: error margin bottom (defaultspacing(3))--field-error-margin-top: error margin top (default0.5rem)--field-error-padding-inline: error padding inline (default0)--field-horizontal-control-width: horizontal control width (default240px)--field-horizontal-label-width: horizontal label width (default120px)--field-label-font-weight: label font weight (defaultvar(--font-weight-medium))