🌹 Graz - George Design System stands in solidarity with the victims and families affected by the tragic school shooting in Graz. Our hearts go out to all those impacted by this senseless act of violence.

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

Rules For Android
  • Should not be used on Android. Always use a Modal Date Picker.

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

Rules For Android

Date Range Picker

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

Rules For Android

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.

Rules For Android
  • Custom implementation in transaction module. Could be extracted if used by other teams.

MonthPicker

Rules For Android

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.