Field

FuiField wraps a form control with a label, hint text, and validation message. When validationState is set to 'error', child components automatically reflect the invalid state without requiring the invalid prop.

Basic usage

Username

Choose a unique username

<FuiField label="Username" hint="Choose a unique username">
  <FuiInput placeholder="Enter username" />
</FuiField>

Validation states

Success

Looks good!

Warning

This might be an issue

Error

This field is required

<FuiField label="Error" validationState="error" validationMessage="Required">
  <FuiInput />
</FuiField>

Required

Email*

<FuiField label="Email" required>
  <FuiInput placeholder="email@example.com" />
</FuiField>

Orientation

Horizontal

Label is on the left

Vertical

Label is on top

<FuiField label="Name" orientation="horizontal">
  <FuiInput />
</FuiField>

Context bridging — auto invalid

Auto-invalid demo

This field is required

<!-- FuiField passes validationState down automatically -->
<FuiField label="Name" validationState="error" validationMessage="Required">
  <FuiInput />
</FuiField>

Props

Prop	Type	Default	Description
label	string	''	Field label
hint	string	''	Helper text
validationMessage	string	''	Validation message
validationState	success | warning | error | none	none	Validation state
required	boolean	false	Required indicator
orientation	vertical | horizontal	vertical	Label position
size	small | medium | large	medium	Field size

Context bridging

When a child form component (FuiInput, FuiTextarea, FuiCheckbox, FuiSelect, FuiCombobox, FuiRadio, FuiSwitch, FuiSlider, FuiSpinButton, FuiRating, FuiSearchBox) is placed inside FuiField, it automatically receives the validationState via provide/inject. If validationState is 'error', the child applies its invalid visual styling and sets aria-invalid="true", with no need to pass invalid manually.

The invalid prop on the child still takes precedence when explicitly set.