Select component. If you want to place a select with an ID of my-id on a page, use <ons-select select-id="my-id">.
The component will automatically display as a Material Design select on Android.
Most attributes that can be used for a normal <select> element can also be used on the <ons-select> element.
The <ons-select> element is used to display a select box with an arbitrary number of options. It will display a native select on mobile devices.
There are several attributes that can be used to customize the behavior of the element. These are the same attributes as those that can be used for the regular HTML <select> element, including multiple. The select-id attribute can be used for targeting the inner select element.
ons-select component simply adds a native select element if none is provided:
<ons-select class="select">
<select class="select-input">
<option>Opt 1</option>
<option>Opt 2</option>
</select>
</ons-select>
Attributes are added directly to the element. You can do this in HTML or JS.
HTML: <ons-select someAttribute="true" anotherAttribute><ons-select>
JS: document.querySelector('ons-select').setAttribute('someAttribute', 'true')
| Name | Type | Description |
|---|---|---|
| autofocus |
Boolean
false |
Element automatically gains focus on page load. Optional. |
| disabled |
Boolean
false |
Specify if select input should be disabled. Optional. |
| form | String | Associate a select element to an existing form on the page, even if not nested. Optional. |
| multiple |
Boolean
false |
If this attribute is defined, multiple options can be selected at once. Optional. |
| name | String | Name the select element, useful for instance if it is part of a form. Optional. |
| required | Boolean | Make the select input required for submitting the form it is part of. Optional. |
| select-id | String | ID given to the inner select, useful for dynamic manipulation. Optional. |
| size |
Number
1 |
How many options are displayed; if there are more than the size then a scroll appears to navigate them. Optional. |
Properties are accessed on the element through JS, and should be get and set directly. For example: document.querySelector('ons-select').length.
| Name | Description |
|---|---|
| length | Number of options in the select box. |
| options | Several options for handling the select DOM object. |
| selectedIndex | Index of the currently selected option. |
| value | Value of the currently selected option. |
Modifiers are set in the modifier attribute. To use more than one, separate them by spaces. For example:
<ons-select modifier="material
underbar"><ons-select>.
| Name | Description |
|---|---|
| material | Displays a Material Design select input. |
| underbar | Displays a horizontal line underneath a select input. |
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.