diff --git a/docs/api/select.md b/docs/api/select.md index b1edb7348bd..b5a3455aec4 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -66,10 +66,26 @@ import SingleSelectionExample from '@site/static/usage/v7/select/basic/single-se +## Multiple Selection + +By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert or popover overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values. + +Note: the `action-sheet` interface will not work with multiple selection. + +import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md'; + + + ## Interfaces By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md) or [ion-popover](popover.md) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces. +### Alert + +import AlertExample from '@site/static/usage/v7/select/basic/single-selection/index.md'; + + + ### Action Sheet import ActionSheetExample from '@site/static/usage/v7/select/interfaces/action-sheet/index.md'; @@ -82,16 +98,6 @@ import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/inde -## Multiple Selection - -By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert or popover overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values. - -Note: the `action-sheet` interface will not work with multiple selection. - -import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md'; - - - ## Responding to Interaction The main ways of handling user interaction with the select are the `ionChange`, `ionDismiss`, and `ionCancel` events. See [Events](#events) for more details on these and other events that select fires.