components / 09

marked select

open the list and the entire decision redraws itself, from border to chosen item.

shadcnnpx shadcn@latest add berkantay/cheez/marked-select

live

playground

violet

color system

used for every new mark

size

character

open frame

selected mark

open ink

selected ink

state

<MarkedSelect
  label="color system"
  items={themes}
  value={"violet"}
  openMark="rounded-box"
  selectedMark="asterisk"
  character="rushed"
  onValueChange={setValue}
>
  <MarkedSelectTrigger placeholder="choose a color" />
  <MarkedSelectContent>
    {themes.map((theme) => (
      <MarkedSelectItem value={theme.value}>
        {theme.label}
      </MarkedSelectItem>
    ))}
  </MarkedSelectContent>
</MarkedSelect>

behavior

states

each field remains fully operable

placeholder

theme

filled

theme

required

theme

invalid

theme

select one

read only

theme

disabled

theme

composition

grouped tools

labels, separators, disabled items

default tool

typeahead finds an item by name

groups carry meaning without becoming louder than the options. keyboard typeahead and native form submission remain handled by Base UI.

reference

api

compound parts, one visual context

part	prop	type	default	purpose
Select	`value`	`string \| null`	`—`	controlled value
Select	`defaultValue`	`string \| null`	`null`	uncontrolled initial value
Select	`onValueChange`	`function`	`—`	selection callback
Select	`items`	`Item[] \| Record`	`—`	value label lookup
Select	`label`	`ReactNode`	`—`	accessible visible label
Select	`description`	`ReactNode`	`—`	helper text
Select	`error`	`ReactNode`	`—`	invalid state and message
Select	`openMark`	`CheezType`	`"rounded-box"`	open trigger frame
Select	`selectedMark`	`CheezType`	`"asterisk"`	selected item symbol
Select	`character`	`"calm" \| "rushed" \| "chaotic"`	`"rushed"`	drawing personality
Select	`size`	`"small" \| "medium" \| "large"`	`"medium"`	trigger scale
Select	`name`	`string`	`—`	native form field name
Select	`required`	`boolean`	`false`	required form state
Select	`readOnly`	`boolean`	`false`	read-only state
Select	`disabled`	`boolean`	`false`	disabled state
Trigger	`placeholder`	`ReactNode`	`"select"`	empty value copy
Content	`alignItemWithTrigger`	`boolean`	`false`	popup positioning mode
Content	`sideOffset`	`number`	`6`	trigger gap
Item	`value`	`string`	`—`	unique option value
Item	`disabled`	`boolean`	`false`	disabled option

behavior notes

Enter, Space, Arrow Up, and Arrow Down open the popup
typing performs keyboard typeahead
Escape closes and restores trigger focus
the selected value joins native form submission
the popup never depends on Framer Motion
reduced-motion users skip caret and popup transitions