Field

Quick Preview

Composition

Use this public composition when building Field:

FieldSet
├── FieldLegend
└── FieldGroup
    └── Field
        ├── FieldLabel
        │   └── FieldLabelSupplement
        ├── FieldContent
        ├── FieldDescription
        └── FieldError

Usage

<Field>
  <FieldLabel withAsterisk>
    City/Areas
    <FieldLabelSupplement>(you can select multiple)</FieldLabelSupplement>
  </FieldLabel>
  <Input />
</Field>

Examples

Orientation

Use orientation to choose stacked fields, inline control rows, or responsive layouts.

Payment alerts

Horizontal layout pairs toggle controls with copy.

I accept the terms

Props

Prop/API	Type	Default	Description
`orientation`	`"vertical"	"horizontal"	"responsive"`
`size`	`"sm"	"md"	"lg"`
`variant` on FieldLegend	`"legend"	"label"`	`"legend"`
`FieldLabelSupplement`	native `span` props	-	Adds inline secondary label text that wraps naturally.
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the underlying root or primitive.

Accessibility

Preserve the documented Field composition so labels, triggers, content, and controls remain connected.
Provide visible labels or accessible names for interactive controls.
Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
Do not communicate state with color alone; include text, icons, or helper copy.