InputGroup

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.

• 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

• Tab/Shift + Tab: Standard form navigation through child controls
• Individual keyboard interactions are handled by child components (InputField, Select, etc.)

• 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

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

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

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

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.

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.