Installation
npx sdaia-ui@latest add field-group
Usage
import { FieldGroup } from '@/components/ui/FieldGroup';<FieldGroup legend="Contact details" hint="We use these details to reach you about your request.">
<TextInput label="Email" type="email" required />
<TextInput label="Mobile number" inputMode="tel" required />
</FieldGroup>RTL
The legend, hint and fields mirror for right-to-left. This example uses the bordered style.
Loading demo: field-group-rtl
Examples
Vertical, plain
Fields stacked under the legend. The default choice.
Loading demo: field-group-default
Vertical, bordered
The group sits inside its own bordered container.
Loading demo: field-group-bordered
Horizontal, plain
Two short, related fields share one row and wrap to one per line on a phone.
Loading demo: field-group-horizontal
Horizontal, bordered
A bordered container with fields on one row.
Loading demo: field-group-horizontal-bordered
Without hint
The hint is optional. Here the group holds a radio question.
Loading demo: field-group-without-hint
When to use
- Contact details, address or ID blocks
- Two or three related fields on one row
- Radio and checkbox groups that share a question
- Dividing a long form into scannable parts