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
<Fieldlabel="Choose your currency">
<Select
required={true}
options={[
{ value:"eth", label:"Ethereum"},
{ value:"btc", label:"Bitcoin"},
{ value:"gno", label:"Gnosis"},
{ value:"gnt", label:"Golem"},
{ value:"rep", label:"Augur"}
]}
/>
</Field>
Options as children
<Fieldlabel={"Choose your currency"}>
<Select>
<optgrouplabel="Fiat">
<optionvalue="usd">US dollar</option>
<optionvalue="gbp">Great Britain pound</option>
<optionvalue="brl"disabled>
Brazilian real
</option>
</optgroup>
<optgrouplabel="Crypto">
<optionvalue="btc">Bitcoin</option>
<optionvalue="eth">Ethereum</option>
<optionvalue="ltc">Litecoin</option>
</optgroup>
</Select>
</Field>
Props
options
arrayOf
(optional)
Styled System Props
Select uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.
Design guidelines
Some best practices for using Select in your product.
It's better to show your options
Do
Use a Select component if there are lots of choices that might clutter an interface. Or use a Radio component instead.
OR
Don't
Don't use a Select component when there are only a few options as it'll be quicker and simpler to just display the available choices.
Related components
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
(ﾉ◕ヮ◕)ﾉ*:・ﾟ✧
Contribute to Rimble
We welcome pull requests and issues that help improve Rimble!
