Choice list

In context

Try it

Multi-select — tap to toggle. "Charcoal" is disabled.

Purpose

Choice list is the friendly, first-run way to make one decision from a short set. It's bigger and calmer than a radio list and quieter than a grid of buttons — sized for a thumb and for a user who reads a screen by shape before words. Selection is obvious at a glance: the picked row turns a soft teal with a check, the rest stay plain white.

Anatomy

• Option — a full-width white pill-card, at least 56dp tall. Optional leading icon (mono, outline), a label, and an optional one-line description.
• Selection — the chosen option(s) sit on a soft teal tint with a teal edge and a filled check; the label goes semibold. This is the one licensed brand moment on the screen.
• Disabled — a dimmed option that doesn't respond, for a choice that isn't available yet.

Code

import { ChoiceList } from '@daytwo/components'

// Single-select — value is a string
const [pick, setPick] = useState('money')

<ChoiceList
options={[
  { value: 'money', label: "Can't track my money", icon: <Wallet /> },
  { value: 'owed', label: 'People owe me', icon: <Banknote /> },
  { value: 'save', label: 'Hard to save', icon: <Receipt /> },
]}
value={pick}
onChange={setPick}
/>

// Multi-select — value is a string[]; toggle in onChange
const [picked, setPicked] = useState(['drinks'])

<ChoiceList
multiple
options={cats}
value={picked}
onChange={(v) =>
  setPicked((prev) =>
    prev.includes(v) ? prev.filter((x) => x !== v) : [...prev, v],
  )
}
/>

For Burmese or Thai labels, pass fontFamily so the labels render in the right script.

When to use

• A single decision from 2–6 options, especially first-run and onboarding.
• When each option benefits from an icon or a short description — richer than plain radio buttons.
• Multi-select tag/category pickers where each row is a peer.

When NOT to use

• Switching a view of the same screen — that's a segmented control.
• Long lists (past ~6) — use a searchable list or dropdown; a wall of pill-cards stops being scannable.
• An on/off setting — use a switch.

Edge cases

Tokens used