FieldGroup
Group multiple input fields together
Introduction
FieldGroup is used to group multiple input fields together with a unified label, description, and validation state. It supports various input types including Input, Select, DatePicker, and static text or icons using FieldGroup.Item. This component is ideal for combining related inputs like URL prefixes or layouts that mix inputs with selects.
Interactive demo
Try the interactive demo below to explore the FieldGroup component.
Usage
Here are some examples of usage of FieldGroup:
Using a label with a description, clear text or icons within FieldGroup.Item, and placeholder text in the input is an effective way to use the component.
Do not make the FieldGroup.Item area clickable. It should only contain static text or icons; the input or select should be the sole interactive element.
Disabled vs Read-only
We have two different states for non-editable input fields:
- Disabled: Can't be focused, edited, or read by screen readers. It does not meet WCAG contrast requirements.
- Read-only: Input is interactive and can be focused, but not edited. Use when you want to display information.
In general, use read-only over disabled for better accessibility.
FieldGroup in components
FieldGroup can be used within various components. See the links below for more information on how FieldGroup can be integrated with these components.