The Select component is a wrapper around the select tag. It uses the native browser select under the hood. The Select component allows users to select one item from a limited number of choices (ideally up to 15).
To see the select in action, check out the visualization controls patterns.
import Select from "@ds-kit/select"
<Select mb="7rem" defaultValue="1" options={[ { value: "1", label: "Option 1" }, { value: "2", label: "Option 2" }, { value: "3", label: "Option 3" }, ]} />
<Div pb="7rem"> <Select size="sm" label="select-sm" defaultValue="1" options={[ { value: "1", label: "Option 1" }, { value: "2", label: "Option 2" }, { value: "3", label: "Option 3" }, ]} mr="0.5rem" /> <Select size="md" label="select-md" defaultValue="1" options={[ { value: "1", label: "Option 1" }, { value: "2", label: "Option 2" }, { value: "3", label: "Option 3" }, ]} mr="0.5rem" /> <Select size="lg" label="select-lg" defaultValue="1" options={[ { value: "1", label: "Option 1" }, { value: "2", label: "Option 2" }, { value: "3", label: "Option 3" }, ]} /> </Div>
class Sample extends React.Component { constructor(props) { super(props) this.state = { selected: "1", } this.handleChange = this.handleChange.bind(this) } handleChange({ target }) { this.setState({ selected: target.value }) } render() { return ( <div> <Select value={this.state.selected} onChange={this.handleChange} options={[ { value: "1", label: "Option 1" }, { value: "2", label: "Option 2" }, { value: "3", label: "Option 3" }, ]} /> </div> ) } }
<Select defaultValue="1" options={[ { value: "1", label: "Option 1" }, { value: "2", label: "Option 2" }, { value: "3", label: "Option 3" }, ]} bg="green.400" bgHover="green.500" color="white" colorHover="white" />
value
string
options
array
label
string
"select-1"
onChange
func
size
"sm"
"md"
"lg"
"md"
m
string
number
array
mx
string
number
array
my
string
number
array
mr
string
number
array
ml
string
number
array
mt
string
number
array
mb
string
number
array
width
string
number
array
maxWidth
string
number
array
color
string
"text"
bg
string
"grey.25"
bgHover
string
"grey.50"
colorHover
string
"text"