Accessibility
The InputGroup component has been designed with accessibility in mind, providing a fieldset structure that groups related form controls with proper semantic markup and screen reader support.
Accessibility Props
Name | Type | Description |
---|---|---|
ariaLabel | string | Provides an accessible label for the fieldset when no visible label is provided. |
ariaLabelledby | string | References the ID of an element that labels the fieldset. |
label | string | Provides a visible legend for the fieldset that also serves as the accessible name. |
error | React.Node | Provides a group-level error message. When displayed, its content is assigned to aria-describedby on all child components. |
help | React.Node | Provides contextual help for the group. Behaves the same as error and is announced to screen readers via aria-describedby . |
required | bool | When true , applies aria-required="true" to indicate at least one field must be completed. |
Automatic Accessibility Features
- The component automatically manages ARIA attributes:
aria-required="true"
when therequired
prop is setaria-describedby
on all child elements when InputGroup haserror
orhelp
content and the tooltip is shown
- The component automatically manages semantic structure:
- Uses
<fieldset>
element to group related form controls - Wraps
label
prop content in<legend>
element
- Uses
- Child component integration:
- InputGroup
error
/help
takes precedence over individual component messages, i.e childerror
/help
props are ignored - Child component labels are visually hidden but converted to
aria-label
for screen readers - Child component
ariaDescribedby
andariaLabel
values are overwritten by InputGroup’s accessibility logic
- InputGroup
Keyboard Navigation
- Tab/Shift + Tab: Standard form navigation through child controls
- Individual keyboard interactions are handled by child components (InputField, Select, etc.)
Best Practices
- Always provide either
label
orariaLabel
to ensure the fieldset has an accessible name - Use
ariaLabelledby
when referencing an existing heading that describes the group - Avoid setting
ariaDescribedby
on child components as InputGroup will completely override these values - Use InputGroup’s
error
andhelp
props for group-level messages rather than individual component messages - Ensure all accessibility strings are properly translated
- Group only logically related form controls together
Examples
Basic InputGroup with Label
<InputGroup label="Passenger details"><InputField label="First name" /><InputField label="Last name" /></InputGroup>
Screen reader announces: “First name, edit, Passenger details, group” when focusing on the first input field.
InputGroup with Error Message
<InputGroup label="Contact information" error="Please complete all required fields"><InputField label="Email" required /><InputField label="Phone number" /></InputGroup>
Screen reader announces: “Email, required, edit, Please complete all required fields, Contact information, group” when focusing on the first input field.
InputGroup with ariaLabelledby
<Stack><Heading id="travel-details">Travel Details</Heading><InputGroup ariaLabelledby="travel-details" label="Destinations"><Select options={countryOptions} label="Departure country" /><Select options={countryOptions} label="Destination country" /></InputGroup></Stack>
Screen reader announces: “Departure country, edit, Travel Details, group” when focusing on the first select field.
Note: The label
prop is ignored by the screen reader when ariaLabelledby
is provided.
Required InputGroup
<InputGroup label="Billing address" required><InputField label="Street address" /><InputField label="City" /><Select options={countryOptions} label="Country" /></InputGroup>
Screen reader announces: “Street address, edit, Billing address, group, required” when focusing on the first input field.
Group-level error/help messages
If the InputGroup has error
/help
messages, these will be properly associated with all child components:
<InputGroup label="Travel preferences" error="Please complete all fields"><Select options={countryOptions} label="Departure country" help="Fill in the origin country" /><Select options={countryOptions} label="Destination country" /></InputGroup>
Screen reader announces: “Departure country, edit, Please complete all fields, Travel preferences, group” when focusing on the first Select component and “Destination country, edit, Please complete all fields” when focusing on the second Select component.
Note: Individual component help
/error
messages are ignored when the InputGroup has its own message.
Component-level error/help messages
If individual child components have their own error
/help
messages (and the InputGroup doesn’t), only those specific components will have aria-describedby
set:
<InputGroup label="Travel preferences"><Select options={countryOptions} label="Departure country" /><Select options={countryOptions} label="Destination country" error="This field is required" /></InputGroup>
Screen reader announces: “Departure country, edit, Travel preferences, group” when focusing on the first Select component, and “Destination country, edit, This field is required” when focusing on the second Select component.