<Select />

Select input component.

Tutorial

Select input

The <ons-select> element is used to display a select box with an arbitrary number of options.

There are several props that can be used to customize the behavior of the element. These are the same props as those that can be used for the regular HTML <select> element.

If you want to place a select with an ID of my-id on a page, use <Ons.Select select-id="my-id">.

Please check the Onsen UI Reference documentation for a complete reference of the enabled props.

Props

Name Type Default Value Description
modifier string The appearance of the select box. Optional.
disabled bool Specifies whether the select is disabled. Optional.
onChange function Called when the value of the select changes. Optional.
value string Use this prop to set the selected option value. Optional.
multiple boolean If this attribute is defined, multiple options can be selected at once. Optional.
autofocus boolean Element automatically gains focus on page load. Optional.
required boolean 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 string How many options are displayed; if there are more than the size then a scroll appears to navigate them Optional.

Preset Modifiers

Name Description
material Displays a Material Design select input.
underbar Displays a horizontal line underneath a select input.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter 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.