| title |
|---|
ion-picker |
import Props from '@ionic-internal/component-api/v8/picker/props.md'; import Events from '@ionic-internal/component-api/v8/picker/events.md'; import Methods from '@ionic-internal/component-api/v8/picker/methods.md'; import Parts from '@ionic-internal/component-api/v8/picker/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/picker/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/picker/slots.md';
<title>ion-picker: Display a list of options in columns</title>import EncapsulationPill from '@components/page/api/EncapsulationPill';
A Picker displays one or more columns with options for users to choose from.
import Basic from '@site/static/usage/v8/picker/basic/index.md';
Use the prefix and suffix slots to add additional content to the picker.
import PrefixSuffix from '@site/static/usage/v8/picker/prefix-suffix/index.md';
The picker highlight and fade can be customized using CSS variables on ion-picker. Developers can customize the individual appearance of ion-picker-column-options by targeting them directly and using host level styling.
import CSSProps from '@site/static/usage/v8/picker/theming/css-properties/index.md';
Pickers can be displayed inside of overlays, such as ion-modal to create a picker experience with confirmation or cancellation buttons.
import ModalExample from '@site/static/usage/v8/picker/modal/index.md';
Picker supports navigation using a screen reader by implementing the slider role on each Picker Column. The following gestures can be used to navigate the Picker.
| Gesture | Function |
|---|---|
| Swipe Left | Move focus to the previous Picker Column. |
| Swipe Right | Move focus to the next Picker Column. |
| Swipe Up | Select the next option in the Picker Column. |
| Swipe Down | Select the previous option in the Picker Column. |
| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. |
:::caution
The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the slider documentation. Chromium-based browsers do not synthesize keyboard events correctly, but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers.
:::
Each Picker Column can be navigated using the keyboard when focused.
| Key | Description |
|---|---|
| ArrowUp | Scroll to the previous option. |
| ArrowDown | Scroll to the next option. |
| PageUp | Scroll up by more than one option. |
| PageDown | Scroll down by more than one option. |
| Home | Scroll to the first option. |
| End | Scroll to the last option. |