Grouped fields
The Grouped fields component allows two closely related form inputs to be grouped together.
import { ... } from '@ag.ds-next/react/grouped-fields';Usage
Grouped fields components can be imported via the grouped-fields entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/grouped-fields';Props
| Prop | Type | Description |
|---|---|---|
| children | (props: { field1Props: FieldA11yProps; field2Props: FieldA11yProps; }) => ReactNode | The two form inputs. |
| legend | string | Describes the purpose of the group of fields. |
| field1Invalid? | booleanDefault: false | If true, the invalid state will be rendered for field 1. |
| field2Invalid? | booleanDefault: false | If true, the invalid state will be rendered for field 2. |
| hideOptionalLabel? | booleanDefault: false | If true, "(optional)" will never be appended to the legend even when `required` is `false`. |
| hint? | string | Provides extra information about the group of fields. |
| id? | string | A unique ID used as the basis for internal IDs. |
| message? | string | Message to show when either field is invalid. |
| required? | boolean | If false, "(optional)" will not be appended to the legend. |
| visuallyHideLegend? | booleanDefault: false | If true, the legend is hidden for sighted users. |
Source
You can view the full source code for this package on Github.