Picker

There are multiple ways & components that you can use to help users select a date or a specific value instead of using a standard text input field.

Date Picker

The most common use case for pickers is the selection of a specific date or a specific date range.

Inline Date Picker

George has a custom designed Inline Date Picker in place, that is e.g. used in the payment flow to select a specific execution date.

iOS also offers a variant of their OS-based date picker that can be rendered inline in combination with a cell that triggers the input

Open in Figma

Modal Date Picker

Both Android & iOS offer a OS-based date picker that is presented modally on top of the current view.

Open in Figma

Date Range Picker

Selecting a start and an end date. Not used in George by now.

Month Range Picker

Selecting a start month and an end month.
George has a custom designed inline Month Range Picker in place.
It is used in the transaction search to filter a search result based on a specific time frame.

Open in Figma

MonthPicker

Value Picker

For scenarios where a user is asked to pick a single value - like a specific amount - from a list of of provided values, a simple picker view can be used.

iOS

iOS provides a native component for such use cases. Theoretically, a picker can have multiple elements that can be individually scrolled and adjusted, however, since such a configuration is usually used to select a specific date, we use the Date Picker components described above.

Android BETA

Android does not provide a native component for Jetpack Compose for such use cases.
However, there is a legacy component in place, that is currently used for Credit Card Limit adjustments.

Open in Figma