Field
Form field wrapper with a label, helper text, an error message, and automatic accessibility linking to its control.
import { Field } from "@plexui/vue/components/Field";Examples
Overview
size
With description
With error message
Required
Sizing
size
Horizontal layout
orientation
Textarea
Select
Label action
Slider
Fieldset
Checkbox
Radio
Switch
Field group
Validation and Errors
Slot props pattern
Field's default slot receives { id, "aria-describedby", "aria-invalid" } (plus opticallyAlign when set). A slot that reads these props renders its content as it is, so you bind them where they belong, like React's render prop. A slot that does not read them gets its single root element wired by Field.
<Field label="Email" error-message="Email is required" v-slot="fieldProps">
<Input v-bind="fieldProps" placeholder="Enter email..." />
</Field>Optical alignment
Form example
Profile settings
Create project
Field configuration
Birthday input
Birthday with validation
Birthday segmented input
Birthday with selects
API
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text for the field |
label slot | VNode[] | — | Rich label content; takes precedence over the label prop |
description | string | — | Helper text below the label; linked via aria-describedby (or the description slot) |
error-message | string | — | Error message below the control; sets aria-invalid on the child (or the errorMessage slot) |
label-action | string | — | Content at the end of the label row, such as a link that acts on the field (or the labelAction slot) |
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 |
optically-align | "start" | "end" | — | Applies optical alignment to the child control via negative margin using its gutter |
id | string | — | Override the generated id used for the label's for and aria linking |
class | string | — | CSS classes applied to the root element |
default slot | (fieldProps) => VNode[] | — | Form control; its single root element receives id, aria-describedby and aria-invalid (plus aria-labelledby unless it has its own name) unless the slot reads fieldProps, which include aria-labelledby |
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))