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)
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.
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
Tapping on the area, which expands from left edge to the order direction label or the drag handle, toggles the selection of a critria.
Toggle Order Direction
Tapping on the word area will toggle the order direction.
Drag on the Handle
dragging on the icon will move the whole cell.
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.