Dropdown

In context

Try it

Tap the field to open the menu.

The open menu

When tapped, a panel drops directly below the field, overlaying the content beneath. Each option is a full-width row at least 48dp tall; the current choice is highlighted and brand-colored with a check. Tapping a row picks it and closes the menu; tapping anywhere outside dismisses without changing anything. If the field sits near the bottom of the screen, the menu opens upward instead.

Purpose

A dropdown lets a user pick one value from a list that's too long for a row of buttons. The closed field keeps the form compact; the menu gives every option room to be read and tapped without precision.

Anatomy

• Field — mirrors Input: a label above, the selected value (or placeholder) inside, and a caret on the right that flips while open.
• Menu — a panel anchored to the field's bottom edge, lifted on a shadow so it reads above the content.
• Rows — each is a ≥48dp tap target. The selected row is highlighted, brand-colored, and carries a check.
• Outside tap — anywhere off the menu dismisses it without changing the value.

Code

import { Dropdown } from '@daytwo/components'

const [category, setCategory] = useState()

<Dropdown
label="Category"
placeholder="Choose a category"
options={[
  { value: 'food', label: 'Food & drink' },
  { value: 'groceries', label: 'Groceries' },
  { value: 'clothing', label: 'Clothing' },
  { value: 'other', label: 'Other' },
]}
value={category}
onChange={setCategory}
/>

For Burmese labels, pass fontFamily (the Noto Sans Myanmar family) so both the field and the menu rows render in the right script.

When to use

• To pick one value from four or more options (a category, a unit, a customer).
• When the options are too many, or too long, to lay out as a row of segments.
• In a form, where a compact field keeps the screen scannable until it's needed.

When NOT to use

• For two or three peer options — show them all at once with a segmented control; don't hide them behind a tap.
• To switch sections of a screen — that's tabs.
• For a yes/no setting — use a switch.
• For an action (Save, Delete) — that's a button, not a pick.

The correct scenario

While recording a sale, the owner taps "Category". The menu drops open right below the field with the handful of categories as big rows, they tap "Food & drink", and it collapses back into the field — two taps, no precision needed.

Anti-patterns

Edge cases

Tokens used