Field
Form field wrapper with label, description, error, and accessibility linking
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...
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
Reference
| 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 |
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | Controls the label font size to match the child control |
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 |