View in Storybook
Anatomy
When multiple options selected need to be visible at first glance within an input, our Chip component can be displayed. Any number of chips can be added depending on the volume of options selected.
- Label (optional): A title for a SelectChip to describe its purpose.
- Prefix (optional): Used to guide what type of options can be selected.
- Text: Displays any amount of selections as our Chip.
- iconRight: Indicates options are available to select within a DropdownMenu.
- helpMessage (optional): When a label is not required, longer helpful text can be added.
Sizes
By default, a SelectChip input will be as wide as the text of it's longest option. You can render a select input to fill the width of it's parent element. Chip can be removed for the input without having to open the Select menu.
Usage
Scroll
When space is restricted, the SelectChip input can be a narrower but still accommodate any number of Chips. These become scrollable within the input itself.
Expanded
A larger array of selected chips can also be made visible in the expanded variant.
Best practice
- Use a select input for longer lists of options. For 4 options or fewer and vertical space is available, use a group of Radio or multi-selectable Checkbox items
- Order the menu options in a logical order to make it easier for users to find the option they're looking for. Default to alphabetical order when this is appropriate.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Use when a user can select more than 1 option from a list. |
🚫 Use SelectChip when only a single item can be selected. Use Select instead. |
Also see