View in Storybook
Anatomy
Be default, SelectGroup contains a maximum of 6 Select components in a row. Any of these can be swapped with our SelectChip if required.
- Select: A set of up to 6 select components can be used at any one time.
Sizes
As we support 2 sizes for all of our Form components, we will do the same for SelectGroup.
Usage
Bespoke widths
The component can be any width desired, as can be the individual Selects within a group.
Properties
Depending on their purpose, the SelectGroup can contain a mixture of properties and variants for all of the available Select components such as Icon, Prefix and Chip.
Any help or errorMessage can still be added beneath an individual Select.
Structure
Each SelectGroup, when used more than once together, should have the appropriate 8px padding between them to make the content in each select more scanable.
Best practice
- Maximise the width of the SelectGroup inside the container it sits. If text inside a Select is too long this must be truncated.
- Use helpMessage sparingly when adding multiple SelectGroup components as it will impact the visual balance.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Use between 2 - 6 buttons in any one group. |
🚫 Add individual labels to any select in a SelectGroup. If needed, the label should be added as a separate element. |
|
✅ Text must only ever be on a single line, never extended onto 2 or more. |
|
|
✅ Match the same size of SelectGroup when using multiples |
|