Select displays multiple options for a user to pick from in a dropdown menu. User selects one option.
import React from 'react' import Select from '../_select' const SelectDefault = (props) => { const options = [ { value: '1', text: 'Burgers', }, { value: '2', text: 'Pizza', }, { value: '3', text: 'Tacos', }, ] return ( <div> <Select label="Favorite Food" name="food" options={options} {...props} /> </div> ) } export default SelectDefault
import React from 'react' import Select from '../_select' const SelectBlank = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, ] return ( <div> <Select blankSelection="Select One..." label="Where do you live" name="location" options={options} {...props} /> </div> ) } export default SelectBlank
import React from 'react' import Select from '../_select' const SelectDisabledOptions = (props) => { const options = [ { value: '1', disabled: true, text: 'Espresso', }, { value: '2', text: 'Americano', }, { value: '3', disabled: true, text: 'Cappuccino', }, { value: '4', text: 'Mocha', }, { value: '5', text: 'Flat White', }, { value: '6', text: 'Latte', }, ] return ( <div> <Select label="Favorite Coffee" name="coffee" options={options} value="2" {...props} /> </div> ) } export default SelectDisabledOptions
import React from 'react' import Select from '../_select' const SelectDisabled = (props) => { const options = [ { value: 'Apple Pie' }, { value: 'Cookies' }, { value: 'Ice Cream' }, { value: 'Brownies' }, ] return ( <div> <Select disabled label="Favorite Dessert" name="dessert" options={options} {...props} /> </div> ) } export default SelectDisabled
import React from 'react' import Select from '../_select' const SelectRequired = (props) => { const options = [ { value: 'Left' }, { value: 'Right' }, { value: 'I go without laces' }, ] return ( <div> <Select blankSelection="Select One..." label="Which shoe do you tie first?" name="shoe" options={options} required {...props} /> </div> ) } export default SelectRequired
import React from 'react' import Select from '../_select' const SelectValueTextSame = (props) => { const options = [ { value: 'Football' }, { value: 'Baseball' }, { value: 'Basketball' }, { value: 'Hockey' }, ] return ( <div> <Select label="Favorite Sport" name="sports" options={options} {...props} /> </div> ) } export default SelectValueTextSame
import React from 'react' import Select from '../_select' const SelectCustomSelect = (props) => { return ( <div> <Select label="Favorite Holiday" {...props} > <select id="holiday" name="holiday" {...props} > <option value="1">{'Christmas'}</option> <option value="2">{'Thanksgiving'}</option> <option value="3">{'Halloween'}</option> <option value="4">{'Fourth of July'}</option> </select> </Select> </div> ) } export default SelectCustomSelect
Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
import React from 'react' import { Body, Select } from '../..' const SelectError = (props) => { const options = [ { value: '1', text: 'Burgers', }, { value: '2', text: 'Pizza', }, { value: '3', text: 'Tacos', }, ] return ( <div> <Select error="Please make a valid selection" label="Favorite Food" name="food" options={options} value="2" {...props} /> <Body error="Please make a valid selection" status="negative" {...props} /> </div> ) } export default SelectError
import React from 'react' import { Body, Select } from '../..' const SelectInline = (props) => { const options = [ { value: '1', text: 'Burgers', }, { value: '2', text: 'Pizza', }, { value: '3', text: 'Tacos', }, ] return ( <div> <Select inline label="Favorite Food" name="food" options={options} {...props} /> <Body status="negative" {...props} /> </div> ) } export default SelectInline
import React from 'react' import { Body, Select } from '../..' const SelectInlineCompact = (props) => { const options = [ { value: '1', text: 'Burgers', }, { value: '2', text: 'Pizza', }, { value: '3', text: 'Tacos', }, ] return ( <div> <Select compact inline label="Favorite Food" name="food" options={options} {...props} /> <Body status="negative" {...props} /> </div> ) } export default SelectInlineCompact
Try to avoid using select when there are limited options to choose from (ie either or questions, yes/no questions, etc).