InputGroup

Accessibility

Accessibility Props

NameTypeDescription
ariaLabelstringProvides an accessible label for the fieldset when no visible label is provided.
ariaLabelledbystringReferences the ID of an element that labels the fieldset.
labelstringProvides a visible legend for the fieldset that also serves as the accessible name.
errorReact.NodeProvides a group-level error message. When displayed, its content is assigned to aria-describedby on all child components.
helpReact.NodeProvides contextual help for the group. Behaves the same as error and is announced to screen readers via aria-describedby.
requiredboolWhen 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 the required prop is set
    • aria-describedby on all child elements when InputGroup has error or help 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
  • Child component integration:
    • InputGroup error/help takes precedence over individual component messages, i.e child error/help props are ignored
    • Child component labels are visually hidden but converted to aria-label for screen readers
    • Child component ariaDescribedby and ariaLabel values are overwritten by InputGroup’s accessibility logic

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 or ariaLabel 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 and help 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>

InputGroup with Error Message

<InputGroup label="Contact information" error="Please complete all required fields">
<InputField label="Email" required />
<InputField label="Phone number" />
</InputGroup>

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>

Required InputGroup

<InputGroup label="Billing address" required>
<InputField label="Street address" />
<InputField label="City" />
<Select options={countryOptions} label="Country" />
</InputGroup>

Group-level error/help messages

<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>

Component-level error/help messages

<InputGroup label="Travel preferences">
<Select options={countryOptions} label="Departure country" />
<Select options={countryOptions} label="Destination country" error="This field is required" />
</InputGroup>