Select

One choice from a list, in a box that matches the field beside it.

import { Select } from "@dede-style/ui/select", then <Select value={v} onChange={setV} options={options} />. It is controlled, and onChange hands over the option’s value rather than the event or the label. Put it in a Field to give it a name.

  • Start
  • Center
  • End
  • Stretch
PropDescriptionDefaultControl
placeholdershown until an option is chosen. Not a label
sizeheight: 32, 40 (default) or 48px, matching TextInput and Button8101210
  • 8
  • 10
  • 12
variantframe (default) draws the box; plain has no box, for a toolbarframeplainframe
widthhow many characters the trigger fits. full fills the container23451020fullfull
  • 2
  • 3
  • 4
  • 5
  • 10
  • 20
  • full
disableddisables the select and dims itfalse
requiredrequires a choice before the form submits. No asterisk is shownfalse
invalidshows the error state. Inside a Field it follows the Field's errorfalse

Tokens

What a theme can move, where the props above are what an instance can move.

TokenDescriptionValue
--text-input-radiusthe corner, on both the trigger and the list — and it is TextInput's token rather than one of Select's own, because the trigger is TextInput's box. That is the point rather than a shortcut: a select and a field standing in one form have to agree, so they share the lever that decides it. The list takes the same value, since the popup is the same object opened--radius-4

A token appears here only when the value is not already reachable. Anything that resolves through a foundation token or a role needs none, because overriding that already moves it — and a second dial wired to the same value would let this one component drift from everything sharing the role. What is left is the values with no other lever at all.

These are public and overridable — there is no private custom property, because anything on :root is reachable by any stylesheet. What replaces privacy is a stability contract: primitives may move, roles are the guarantee, and these are the per-component escape from both.