React Reference > Select Component

<Select />

Select input component.

Usage 

<Select modifier="material"
  value={this.state.value}
  onChange={(event) => this.setState({value: event.target.value})}>
  <option value="1">1</option>
  <option value="2">2nd</option>
  <option value="3">3rd option</option>
</Select>

Props

[improve this]
Name Type Description
modifier string The appearance of the select box. Optional.
disabled bool Specifies whether the select is disabled. Optional.
onChange func Called when the value of the select changes. Optional.
value string Use this prop to set the selected option value. Optional.
defaultValue string Use this prop to set the defalut selected option value (uncontrolled components). Optional.
multiple bool If this attribute is defined, multiple options can be selected at once. Optional.
autofocus bool Element automatically gains focus on page load. Optional.
required bool Make the select input required for submitting the form it is part of. Optional.
form string Associate a select element to an existing form on the page, even if not nested. Optional.
size number How many options are displayed; if there are more than the size then a scroll appears to navigate them Optional.
name string Name the select element, useful for instance if it is part of a form. Optional.

Preset Modifiers

[improve this]
Name Description
material Displays a Material Design select input.
underbar Displays a horizontal line underneath a select input.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.