Skip to content
Site volume
Colourway

Components

Select

A native select in the Input box, with an end glyph and the platform picker, best on phones.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/select
On this page

Example#

Look of this example
Live render of examples/select/basic.tsx

Usage#

Use a select to pick one option from a list of about five to fifteen that people already know, such as a country or a team member. It is the native element in the Input box, so phones open their own picker.

  • Fewer than five options? Show them all with RadioGroup (appearance="keys" for short ones); a select hides choices behind a click.
  • A long list to search? Use Combobox.
  • Placeholder. placeholder adds a hidden, disabled first option ("Choose one"), so nothing is picked by accident.
  • Sizes match Input: sm 40, md 48 and lg 56 px.

Anatomy#

The parts of examples/select/basic.tsx, numbered:
  1. BoxThe Input box; the platform draws the list..mk-select
  2. ValueThe chosen option, or the placeholder..mk-select-control
  3. GlyphA turned play triangle that says it opens..mk-select-glyph

Volume#

Reading layer: identical at every volume.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Options in sentence case, sorted the way people look for them: alphabetical for names, in order for sizes and dates.
  • The label asks the question ("Owner"); the placeholder only says "Choose one".
  • Keep options short enough to fit the box on a phone.

Do and don't#

Do

Budget (optional)

Three options, all in view.

Don't

Three options behind a click.

With a handful of options, showing them all is faster and easier to compare. Save the select for lists too long to show.

Accessibility#

  • Keyboard and screen reader behaviour are the platform's.
  • placeholder is a disabled, hidden first option shown until a value is picked.
KeysWhat happens
TabMoves focus to the select
SpaceorEnterorAlt+DownOpens the platform picker
UporDownChanges the choice

The colour pairs it prints, with their contrast on both papers:

TextSurfaceRoleBoneNight
--mk-ink--mk-paperbody 16.49:1 · Lc 97.4, passes 16.21:1 · Lc 96.1, passes
--mk-ink--mk-paperbody-ui 16.49:1 · Lc 97.4, passes 16.21:1 · Lc 96.1, passes
--mk-ink--mk-paperlong 16.49:1 · Lc 97.4, passes 16.21:1 · Lc 96.1, passes
--mk-ink--mk-paper-sunkenbody 15.20:1 · Lc 92.2, passes 15.53:1 · Lc 95.7, passes
--mk-ink--mk-paper-sunkenbody-ui 15.20:1 · Lc 92.2, passes 15.53:1 · Lc 95.7, passes
--mk-ink--mk-paper-sunkenlong 15.20:1 · Lc 92.2, passes 15.53:1 · Lc 95.7, passes
--mk-ink--mk-paper-platebody 18.42:1 · Lc 105.1, passes 15.02:1 · Lc 95.4, passes
--mk-ink--mk-paper-platebody-ui 18.42:1 · Lc 105.1, passes 15.02:1 · Lc 95.4, passes
--mk-ink--mk-paper-platelong 18.42:1 · Lc 105.1, passes 15.02:1 · Lc 95.4, passes
--mk-ink-rule--mk-paperui 3.27:1 · Lc 56.5, passes 3.65:1 · Lc 25.6, passes
--mk-ink-rule--mk-paper-sunkenui 3.01:1 · Lc 51.2, passes 3.49:1 · Lc 25.2, passes
--mk-ink-rule--mk-paper-plateui 3.65:1 · Lc 64.1, passes 3.38:1 · Lc 24.8, passes
--mk-on-control-2--mk-controlbody-ui 6.59:1 · Lc 82.6, passes 12.47:1 · Lc 82.8, passes

Process at Studio, normal contrast. Every look: the press check.

Props#

PropTypeDefaultDescription
optionsreadonly SelectOption[]none
placeholderstringnoneA disabled, hidden first option shown until a value is picked (e.g. "Choose one").
sizeSizenone
classNamestringnoneLands on the box.
styleCSSPropertiesnoneLands on the box.
childrenReactNodenone

Plus 283 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from SelectProps in packages/overprint-react/src/reading/select/select.tsx.

Tokens#

System tokens (22)

Its own properties (4)

  • --mk-select-glyph-room
  • --mk-select-h
  • --mk-select-hatch
  • --mk-select-pad

Scanned from its CSS at build and checked against its registry entry; 9 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactThe reading layer's controls, overlays, forms and visitor prefs (P2-T1 to P2-T5): every Button is the comic hit key, with IconButton, Link and Tooltip; Input, Textarea, Select, Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider with the ruler, RulerReadout and SegmentedControl; Dialog, Drawer, NavSheet, Tabs, Disclosure, Faq and faqJsonLd on Base UI 1.9 where the platform falls short; Field, Fieldset, Form with the site's inline validation, ErrorSummary, Callout, Honeypot, FormTimestamp and QuoteForm; PrefsScript under 1 KB, usePref and setPref with cross-tab sync, ThemeToggle and the visitor VolumeDial; VisuallyHidden.