Combobox

A combobox is a UI component that combines a text input field with a dropdown list, allowing users to select single or multiple options from a predefined list. It is beneficial when there are many options to choose from.

When users type into a combobox, autocomplete instantly suggests matching options from the list. This speeds up the selection process, guiding users to the right choice effortlessly.

Key Points

Optimized Selection: Comboboxes streamline data entry by allowing users to quickly find and select from a list of options, saving time and reducing effort.
Extensive Data: When dealing with large amounts of data, the selection process for large data sets with a searchable and scrollable dropdown list allows users to quickly find and choose options without overwhelming the interface.
Space Saving: Comboboxes can handle many options without cluttering the UI, making them ideal for limited-space interfaces.

Elements

Combobox Field

Placeholder/Input
Indicator

Combobox Dropdown

Options
- Option Label
- Option Selection
Group Header
- Group Title
- Divider

Behaviours

Tags

States

Idle
Hover
Active
Disabled

Sizes

md (Default)
lg

Variants

Subtle (Default)
Bold

Type

Info

Behaviour

Clickable - All the tag is clickable
Closable - Is a ghost button
Truncation - When there isn't enough space, the label in the tag must be truncated. We need to provide a tooltip with the full label.

Keyboard Navigation When the tag is focused, you can take these actions.

"Enter" & "Space" - Open the link or details.
"Delete" - The tag is deleted.

### Requirements
- [ ] Groups with divider
- [ ] Autocomplete in a list box
- [ ] Clustering selections at the top
- [ ] Create a new option

Tasks

[x] https://github.com/sl-design-system/components/issues/1157
[x] https://github.com/sl-design-system/components/issues/1158
[ ] https://github.com/sl-design-system/components/issues/1388
[ ] https://github.com/sl-design-system/components/issues/1386
[ ] https://github.com/sl-design-system/components/issues/1387
[x] [Tags] First draft of documentation
[ ] https://github.com/sl-design-system/components/issues/1442
[ ] https://github.com/sl-design-system/components/issues/1154
[ ] https://github.com/sl-design-system/components/issues/1155
[ ] https://github.com/sl-design-system/components/issues/1156
[ ] https://github.com/sl-design-system/components/issues/1295
[ ] https://github.com/sl-design-system/components/issues/1598
[ ] https://github.com/sl-design-system/components/issues/1604

CFA Interest

Editorial Suite (Maria Trybus)
Clickedu (Fernando Fornieles)
Max Online (Levi)
Kampus
TEAS
Magister

Feb 13 '23 11:02 DanielleRameau

Input (Kampus)

MultiSelect variant of Select component that we would need:

multiselect: each option is a checkbox and more than one can be selected,
"Select all (number)" option,
possibility to change text in the select field, so that for example:
upon selecting all, select text chages to "All selected (number)"
upon selecting few options (e.g. 3), select text changes to "3 selected" AND the "Select all" changes to Indeterminate state
but upon selecting all students, it says "All students (number)", because it would be weird to see "All selected" in the field that is labelled "Assign to"
Example in Kampus Storybook: https://storybook.kampusdev.sanomapro.fi/?path=/story/design-system-forms-select--multiple-select and of course contact us for more details!

Screenshots