Select / Dropdown
Four selection patterns in one module, each controlled by boolean toggle fields: a simple dropdown, a select with a counter badge, an input-with-button combo, and a numeric counter. All four patterns share the same token surface and can be mixed on a single page by placing multiple module instances.
CSS variables
| Variable | Theme field | Used for |
|---|---|---|
--color-primary | global_colors.primary_color | Selected badge pill background, checked state fill, check icon color |
--color-surface | global_colors.menu_background | Dropdown panel background, trigger button default background, placeholder background |
--color-page-bg | global_colors.page_color | Trigger button hover background, open state background |
--color-heading | global_colors.heading_color | Trigger button text, placeholder text |
--color-body | global_colors.body_color | Trigger button hover text |
--color-light-grey | global_colors.light_grey_color | Trigger button border, open state border, placeholder border |
Number dropdown
A trigger button that opens a dropdown list of options. The trigger shows the selected value and uses --color-light-grey for its border, transitioning to --color-page-bg on open. Use for single-value selections in forms and filter bars.
Select with counter badge
A dropdown trigger that also displays a badge showing how many items have been selected. The badge uses --color-primary as its background. Enable via the select_box_with_number toggle. Use for multi-select filters where showing the selection count is important.
Select with action button
An input field paired with a button — for example, a search field with a Go/Apply button. Enable via the select_with_button toggle. Use for inline filtering or search controls inside panels and toolbars.
Checkbox select list
A multi-select list rendered as checkboxes within a dropdown. Selected options render a checkmark in --color-primary. Enable via the select_box toggle. Use when the user needs to pick multiple items and see all options simultaneously.