ion-picker | Ionic Framework
A Picker displays one or more columns with options for users to choose from.
Prefix & Suffix Content
Use the prefix and suffix slots to add additional content to the picker.
CSS Variables
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.
Pickers can be displayed inside of overlays, such as ion-modal to create a picker experience with confirmation or cancellation buttons.
Console messages will appear here when logged from the example above.
Screen Readers
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. |
Keyboard Interactions
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. |
mode
| Description | The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
No events available for this component.
No public methods available for this component.
No CSS shadow parts available for this component.
- iOS
- MD
| Name | Description |
|---|---|
--fade-background-rgb | Background of the gradient covering non-selected items in rgb format |
--highlight-background | Background of the picker highlight for the selected item |
--highlight-border-radius | Border radius of the picker highlight for the selected item |
No slots available for this component.