Select

Use the Select component when you want your users to select an option from a list. Select provides a styled version of the HTML <select>. This component is specifically useful for long lists you wouldn't want to display using Radio buttons like currencies or states.
Import component
import { Select } from 'rimble-ui';

Example

Props

Prop NameTypeIs RequiredDefault ValueDescription
optionsarrayOfoptionalnone
Styled System Props
Select uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styed System props.

Design guidelines

Some best practices for using Select in your product.
It's better to show your options
Only use the Select component when you have a lot of options that would clutter your interface. If you've only got a few options to choose from it might be better to show them to the user with a Radio component.
Do
OR
Don't
  • Radio - When users can only choose one option or the choices are binary like yes/no
  • Checkbox – When users can choose 0 or multiple options from a list
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute