Skip to main content
Version: v8 (beta)

ion-picker

shadow

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.

Theming

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.

Picker in Modal

Pickers can be displayed inside of overlays, such as ion-modal to create a picker experience with confirmation or cancellation buttons.

Console
Console messages will appear here when logged from the example above.

Properties

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription
--fade-background-rgbBackground of the gradient covering non-selected items in rgb format
--highlight-backgroundBackground of the picker highlight for the selected item
--highlight-border-radiusBorder radius of the picker highlight for the selected item

Slots

No slots available for this component.