Skip to Content
StyleguideComponentsSelection controls

Selection controls

The controls users pick with rather than type into. Ember (primaryColor) marks the selected state on every one of them — checks, dots, tracks, thumbs and chips — while labels stay ink. Every demo is live: click, drag and use the keyboard.

Checkbox

Independent on/off choices, with indeterminate for partially selected sets.

StatesUnchecked, checked, indeterminate and disabled. The check fills with ember (primaryColor).

Orders over $10,000 need two approvals.

Confirm the details to submit

description · errorHelper text under the label; error turns the box and message danger red.
variant="outline"Outlined check on a transparent box: for light-touch lists.
size — xs to xlThe theme default is sm.

Checkbox groups and cards

Grouped options share one label and error; Checkbox.Card turns each option into a selectable tile.

Notify me when

Email and in-app notifications.

Checkbox.GroupOne label and description for the set; the value is a string array.
Delivery days

Pick at least one delivery day

Group with errorwithAsterisk marks it required; the group error sits under the options.
Select all — indeterminate parentThe parent is indeterminate while only some children are checked. Try it.
Modules to enable
Checkbox.CardThe whole card is the hit area; Checkbox.Indicator carries the state and a checked card takes the ember wash and border.

Tree

Hierarchical choices — categories, folders, permissions — browsed or checked with cascading parents.

  • Operations

    • Packaging

      • Corrugated boxes

      • Pallet wrap

      • Void fill

    • Warehouse

  • Facilities

    • Cleaning

    • Utilities

      • Electricity

      • Water

  • Print & stationery

    • Toner

    • Copy paper

Expandable treeuseTree with selectOnClick; the selected row takes the neutral gray wash. Arrow keys walk and expand nodes.

Approver scope

0 of 9 categories selected

  • Locked
Checkbox treerenderNode with tree.isNodeChecked / isNodeIndeterminate: parents cascade to children and show indeterminate when partly selected. The locked branch is disabled.

Radio

One choice from a short, visible list — as plain radios or as cards.

StatesSelected, unselected, disabled and error.
Shipping method

3–5 business days · free

Next business day · $24

Unavailable for this supplier

Radio.Group with descriptionsExactly one choice; each option explains its consequence.
variant="outline" · sizesOutline dot, then xs to xl.
Payment terms

Choose payment terms

Horizontal group with errorInline options and a group-level error.
Workspace plan
Radio.Card — plan choiceCard-sized options with Radio.Indicator carrying the state and an ember wash on the chosen card; arrow keys move between them.

Switch

Settings that take effect immediately, without a Save button.

StatesOn, off, disabled and error. The track fills with ember.
size — xs to xlMatch the switch to the row density; sm is the default.
label · description · labelPositionlabelPosition="left" for forms where the label leads.
onLabel / offLabel · thumbIconText or icons inside the track and thumb. Use size md or larger.

Email notifications

Approvals, comments and mentions.

Require approval over $10,000

Routes large orders to Finance before submission.

Allow supplier self-service

Suppliers can update their own contact details.

Two-factor authentication

Enforced by your organisation policy.

Settings listThe canonical settings row: label and description left, switch right, hairline dividers.

Chip

Compact toggles for filters and tags, alone or in single and multiple groups.

variantfilled (default), outline and light, checked and unchecked.
size · disabledxs to xl; a disabled chip keeps its checked state visible.
Chip.Group — singleWithout multiple, chips behave like radios.
Chip.Group — multiplemultiple returns a string array, like Checkbox.Group.

3 of 7 orders · $82,640

Chips as list filtersStatus filters above an order list; toggle them and the summary updates.

SegmentedControl

A tab-like single choice for switching views or periods.

DefaultA raised indicator slides over a neutral track. Best for 2–5 options.
color="primary"A filled ember indicator for a stronger selected state.
size — xs to xlPair with the surrounding controls.
fullWidth · with iconsView switchers above a data view; icons go inside the label.
Icon-onlyHide the text with VisuallyHidden so the option keeps an accessible name.
disabledThe whole control, or a single option.
orientation="vertical"Stacked options for a narrow side panel.
readOnlyShows the current value without allowing a change, e.g. a period locked by policy.

Slider

Choosing a value, or a range, on a continuous scale.

Stock reorder threshold

SliderDrag or use arrow keys; the value label appears while dragging or hovering.

Approval quorum

60%
labelAlwaysOnPin the value label when the number itself matters.

Budget alert at

0%
25%
50%
75%
100%
marks · stepmarks with labels; step={25} snaps to them.
disabled · sizesDisabled track, then xs, md and xl thickness.

Order amount

$0
$25k
$50k
$75k
$100k
RangeSliderTwo thumbs for a min/max filter; minRange keeps them apart. Labels use the shared formatMoney.

Rating

Star ratings for input and for displaying averages.

Rate this supplier

InteractiveStars fill with the yellow alias, i.e. the warning scale.

4.5

· 128 reviews

readOnly · fractionsfractions={2} renders half stars for averages.

xs

sm

md

lg

xl

size — xs to xlsm is the default.

Priya Raman

Atlas Packaging delivered early and the invoices matched.

Daniel Osei

Good pricing; one pallet arrived with damaged wrap.

Hana Kobayashi

Support was slow to answer during the holidays.

In context — supplier reviewsRead-only xs stars beside each review.
Last updated on
Text inputs & pickersFeedback & status