FieldGroup

Related field grouping

UtilityStable

Preview

Interactive preview of the FieldGroup component with different variants.

Full Name
Enter your first and last name
Email Address
We'll never share your email
Password
Password must be at least 8 characters

Installation

Install the package via npm:

bash
npm install apex-design-system

Import

tsx
import { FieldGroup, Label, Input } from 'apex-design-system';

Basic Usage

tsx
<FieldGroup>
  <Label htmlFor="first-name">First name</Label>
  <Input id="first-name" />
  <Label htmlFor="last-name">Last name</Label>
  <Input id="last-name" />
</FieldGroup>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in StorybookView source