Updated: January 28, 2022

Order Picker Form Cell

FUIOrderPickerFormCell

Intro

Order Picker Form Cell is used for the purpose of sorting with multiple criteria where the sort order direction and the sequence of criteria matter.

Example of order picker form cells on iPhone (left) and iPad (right)
Example of order picker form cells on iPhone (left) and iPad (right)

Anatomy

A: Order Picker Header

The header contains a form label.

B: Criterion Cell (higher priority)

The cell represents one criterion. The top most is the highest priority in the sorting sequence.

C: Criterion Cell (lower priority)

The cells locate below have lower priority in the sorting sequence.

D: Checkmark

Checkmark shows which criteria are selected.

E: Criterion Label

The label shows what criterion is for.

F: Order Direction Label

The label shows current sort order direction for the selected criterion.

G: Drag Handle

By dragging the handle, the criterion cell will move and rearrange

Anatomy of the order picker form cell
Anatomy of the order picker form cell

Behavior and Interaction

Touch Area

Toggle Checkmark

Tapping on the area, which expands from left edge to the order direction label or the drag handle, toggles the selection of a critria.

Example that show touch area boundary for toggling selection
Example that show touch area boundary for toggling selection

Toggle Order Direction

Tapping on the word area will toggle the order direction.

Example that show touch area boundary for toggling order direction
Example that show touch area boundary for toggling order direction

Drag on the Handle

dragging on the icon will move the whole cell.

Example that show touch area boundary for dragging and rearranging criteria
Example that show touch area boundary for dragging and rearranging criteria

Wrapping

By default, the content get truncated, but the component can be set to wrap all texts.

Example showing wrapping behavior when the texts are too long
Example showing wrapping behavior when the texts are too long

Adaptive Design

Similar to form cells, Order Picker is usually use as one section apart from other form cells. In compact width layout, the component follows default container’s layout margin. It can also be put in Readable Regular width layout as well.

Example of order picker form cells on iPhone (left) and iPad (right)
Example of order picker form cells on iPhone (left) and iPad (right)

Variations

Modality

Order picker form cell can be used inside several different containers.

Example showing order picker being used in a form panel and a bottom sheet
Example showing order picker being used in a form panel and a bottom sheet

Resources

Development: FUIOrderPickerFormCell

Related Pattern: Sort & Filter