Date, time and calendars
Desktop17 components73 variants4 recreations
Desktop date and time fields, calendar and range pickers, time zones, month, week and day views, events and slot pickers.
$9, or included with Pro
Selection controls (Desktop)
Desktop packActions and input
Desktop checkbox and radio groups, setting switches, sliders, steppers, ratings, swatches, a colour picker and a transfer list.
- components
- 13
- variants
- 54
- recreations
- 3
- themes
- 5
Also for mobile: Selection controls
What’s inside
Thirteen desktop selection patterns: checkbox groups with a select-all parent, radio groups and tiles, setting switches with saving and error states, choice lists, option tiles, sliders with inputs and ranges, number steppers, star ratings, a colour picker, swatch groups and a dual transfer list. Each page documents use, anatomy, keyboard and screen reader behaviour, with a live grid in light and dark.
- Invalid and disabled states on groups, with one-line error text
- Colour picker with palette, custom hex entry and recent colours
- Recreations of Shopify admin, Figma and Linear pickers
Checkbox group
Free sample5 variants
- None
- Some
- All
- Invalid
- Disabled
Radio group
5 variants
- Vertical
- Horizontal
- Descriptions
- Invalid
- Disabled
Radio tiles
3 variants
- Plans
- Delivery
- Invalid
Setting switch
5 variants
- Off
- On
- Saving
- Error
- Disabled
Choice list with descriptions
4 variants
- Single
- Multiple
- With child field
- Invalid
Option tiles
3 variants
- Single
- Multiple
- Limit reached
Slider with input
4 variants
- Default
- Focus
- Disabled
- Invalid input
Range slider
4 variants
- Default
- Dragging
- Focus
- Disabled
Number stepper
6 variants
- Default
- Focus
- Invalid
- Disabled
- Inline
- At minimum
Star rating
5 variants
- Empty
- Set
- Focus
- Read only
- Disabled
Colour picker popover
3 variants
- Palette
- Custom
- Invalid hex
Swatch group
4 variants
- Default
- With hex
- Unavailable
- Disabled
Dual transfer list
3 variants
- Default
- Items checked
- Empty selected
- Figma file
- SuperDuper Pack: Selection controls (Desktop)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 7 UI elements
- Checkbox, Radio button, Switch, Slider, Stepper, Rating control and Colour swatches
How Shopify admin, Figma and Linear do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Admin choice list
Recreated from Shopify admin
Design tool colour picker
Recreated from Figma
Issue priority picker
Recreated from Linear
Not affiliated with, endorsed or sponsored by Shopify admin, Figma and Linear. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the checkbox group full size, free
A checkbox group with a select-all parent at none, some and all, plus invalid and disabled. All 5 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More actions and input packs
Search
Desktop10 components34 variants4 recreations
Desktop search: header trigger, global popover, autocomplete, match highlights, recents, scoped search, results and no results.
$9, or included with Pro
Chips, tags and badges
Desktop10 components64 variants3 recreations
Desktop tags, labels, lozenges, count badges and status indicators, sized for dense tables and sidebars.
$9, or included with Pro
Questions about the selection controls pack
One Figma file: SuperDuper Pack: Selection controls (Desktop). It has 13 components with 54 variants, 3 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.