Picker

Preview

A calendar grid for one date. Use it when the shape of the month matters and a scrolling wheel would hide it. Pick a day, then Submit to keep it or Dismiss to go back.

The card shows January 2026 with the 16th selected and the 2nd, 12th, 17th and a spilled 3rd marked. Seven 36 cells and six 8 gaps fill the 300 that the padding leaves.

Monday takes one letter, the other six take two. The card is bg/raised under dropShadow/2xl, with no stroke.

What does the Date selector do?

The month header is its own private component and the only control in the card that changes what the grid shows.

The selector is a bg/weak-50 pill holding two 32 Compact Buttons at Style White, with the month label centered between them.

Which states does the Day cell have?

The Day cell has eight states crossed with one boolean, and every one is a 36 pt circle. It is the private target behind every number.

Default has no fill and the number on text/sub-700. Pressed takes bg/weak-50 and lifts the number to text/strong-950.

Active is brand/base under a static white number. Today keeps the clear cell and sets the number in brand/base.

Disabled is a spilled day from the next month.

Range Start and Range End are a brand circle with a half band toward the middle, and Range Middle is the band alone, with the number on text/strong-950. The band is 22 wide at the ends and 44 wide in the middle, and it reaches 4 pt past the cell on every side it joins, so a run of cells reads as one band across the 8 pt gap between days.

The band is brand/alpha-10: 10 percent of the brand blue in both modes. The dot is absolutely placed, so it never moves the number.

How does the Time Picker work?

A list of time slots with three quick durations, in a card like the Date Picker's, at radius 40. Pick a slot, then Submit to keep it.

The header pill shows the picked time, with a clock on the left and a clear button on the right. Below it, three quick durations sit in a row: the chosen one is a brand tinted pill with a check.

The list holds half hour slots from 09:30, and its 4 pt scrollbar shows how much is left. The picked slot is bg/weak-50 with a brand tick.

Format only changes the list: in 12-hour each slot adds AM or PM, and in 24-hour the period disappears.

The arrow keys move through the durations and the slots, Dismiss puts the pick back on 10:30 and Submit keeps the slot you chose.

How does the Color Picker work?

A free color from the spectrum, or a pick from the product palette, in a card like the Date Picker's, at radius 40. Drag the spectrum, type a hex value or choose a swatch.

A small two tab Segmented Control, Custom and Palette, heads both types. Custom has a spectrum, a hue slider, a value row with an eyedropper and a hex field, and a row of saved swatches with an Add button.

Palette has three rows of seven swatches, and the value row follows the picked swatch. The swatches are the product's own state colors, so the palette changes with Light and Dark: the light shades of each color are translucent in Dark, and the opacity field shows it.

The spectrum is saturation across and brightness down on the hue you set with the slider. Both handles are sliders for the keyboard: the arrow keys move them, Shift moves ten times as far, and Home and End jump the hue to its ends.

The hex field takes six digits with or without the hash.

How does Picker differ on iOS and Material 3?

iOS draws date and time in one inline or compact picker, Material 3 splits them into modal, input, dial and keyboard pickers, and neither has a color picker in the file. Appetite UI draws three 340 wide cards.

In code, build the Date Picker as a DatePicker with the graphical style on iOS and a DatePicker on Android. For a compact inline choice, use the date selector instead.

The minimum touch target comes from platform/min-touch-target: 44 pt on iOS and 48 dp on Android. The day cells, the slots and the swatches are 36, 36 and 32 pt, below both, so in code give each target the platform minimum around the drawn shape.

Read Platform Bridge for how one screen switches between the platforms, and iOS and Material 3 for the platform mirrors.

Properties

The Date Picker has no properties of its own, the Time Picker has Format and the Color Picker has Type. Every other knob lives on a private block inside them.

_Day Cell 16 variants, Time Picker 2, Color Picker 2. Source: the Picker page of the Appetite UI Figma file, read on October 2, 2026.

Tokens

Every value the pickers read, resolved to its primitive.

The palette swatches read the state tokens: state/error, state/warning, state/away, state/success, state/stable, state/feature, state/highlighted, state/verified and state/faded at base 500, their light 200 shades, and brand/base.

Geometry runs on dimensions/radius/3xl 32 for the Date Picker card and dimensions/radius/4xl 40 for the Time and Color Picker cards, with all three on dropShadow/2xl.

Day labels, AM and PM and the opacity read text/soft-500, which measures 3.26:1 on white and is a documented product choice.

In code the calendar is a grid whose cells take arrow-key focus with a visible ring, and every target needs the 44 pt iOS or 48 dp Android minimum.

When should I use the calendar?

Use the calendar when the shape of the month is part of the decision: a weekend, a deadline near the end, a run of marked days.

When the answer is only a date and the month is irrelevant, a text field is faster and smaller. Let the dot mean one thing and say what it is, because it is the only mark on a day besides the selection.