ion-picker

shadow

A Picker displays one or more columns with options for users to choose from.

<ion-picker>
  <ion-picker-column value="javascript">
    <ion-picker-column-option value="" disabled="true">--</ion-picker-column-option>
    <ion-picker-column-option value="javascript">Javascript</ion-picker-column-option>
    <ion-picker-column-option value="typescript">Typescript</ion-picker-column-option>
    <ion-picker-column-option value="rust">Rust</ion-picker-column-option>
    <ion-picker-column-option value="c#">C#</ion-picker-column-option>
  </ion-picker-column>
</ion-picker>

Prefix & Suffix Content

Use the prefix and suffix slots to add additional content to the picker.

<ion-picker>
  <ion-picker-column [value]="1">
    <div slot="prefix">$</div>
    <ion-picker-column-option value="" disabled="true">--</ion-picker-column-option>
    <ion-picker-column-option [value]="1">1</ion-picker-column-option>
    <ion-picker-column-option [value]="2">2</ion-picker-column-option>
    <ion-picker-column-option [value]="3">3</ion-picker-column-option>
    <ion-picker-column-option [value]="4">4</ion-picker-column-option>
    <ion-picker-column-option [value]="5">5</ion-picker-column-option>
    <div slot="suffix">USD</div>
  </ion-picker-column>
</ion-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.

src/app/example.component.html

<ion-picker>
  <ion-picker-column value="red">
    <ion-picker-column-option value="" disabled="true">--</ion-picker-column-option>
    <ion-picker-column-option value="red">Red</ion-picker-column-option>
    <ion-picker-column-option value="blue">Blue</ion-picker-column-option>
    <ion-picker-column-option value="green">Green</ion-picker-column-option>
  </ion-picker-column>
</ion-picker>

src/app/example.component.css

ion-picker {
  --highlight-background: var(--ion-color-dark);
  --highlight-border-radius: 50px;

  --fade-background-rgb: var(--ion-color-light-rgb);
}

ion-picker-column-option {
  text-transform: uppercase;
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
}

ion-picker-column-option[value='red'] {
  background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
}
ion-picker-column-option[value='blue'] {
  background-image: linear-gradient(-225deg, #2cd8d5 0%, #c5c1ff 56%, #ffbac3 100%);
}
ion-picker-column-option[value='green'] {
  background-image: linear-gradient(-225deg, #11998e 0%, #38ef7d 48%, #40e0d0 100%);
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

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.

src/app/example.component.html

<ion-button id="open-modal">Open modal</ion-button>
<ion-modal #modal trigger="open-modal" [isOpen]="true" (didDismiss)="onDidDismiss($event)">
  <ng-template>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="modal.dismiss(null, 'cancel')">Cancel</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button (click)="modal.dismiss(currentValue, 'confirm')">Done</ion-button>
      </ion-buttons>
    </ion-toolbar>
    <ion-picker>
      <ion-picker-column [value]="currentValue" (ionChange)="onIonChange($event)">
        <ion-picker-column-option value="" disabled="true">--</ion-picker-column-option>
        <ion-picker-column-option value="javascript">Javascript</ion-picker-column-option>
        <ion-picker-column-option value="typescript">Typescript</ion-picker-column-option>
        <ion-picker-column-option value="rust">Rust</ion-picker-column-option>
        <ion-picker-column-option value="c#">C#</ion-picker-column-option>
      </ion-picker-column>
    </ion-picker>
  </ng-template>
</ion-modal>

src/app/example.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
})
export class ExampleComponent {
  currentValue = 'javascript';

  onIonChange(event: CustomEvent) {
    this.currentValue = event.detail.value;
  }

  onDidDismiss(event: CustomEvent) {
    console.log('didDismiss', JSON.stringify(event.detail));
  }
}

src/app/example.component.css

ion-modal {
  --height: auto;

  align-items: end;
}

ion-picker {
  margin-bottom: var(--ion-safe-area-bottom);
}

Properties

mode

Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

Events

Name	Description
ionInputModeChange

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

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

Slots

No slots available for this component.