components / 26

marked combobox

search narrows the noise. the field keeps a hand-drawn edge while every found, focused, and chosen result leaves a different trace.

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

live

find before you choose

marked button

queryfocuschoose

find a tool

results filter as you type

size

ink

character

field mark

chosen mark

value

<MarkedCombobox
  label="find a tool"
  items={tools}
  value={selected}
  onValueChange={setSelected}
  tone="orange"
  size="medium"
  character="rushed"
>
  <MarkedComboboxInputGroup>
    <MarkedComboboxInput placeholder="type to filter…" />
    <MarkedComboboxClear />
    <MarkedComboboxTrigger />
  </MarkedComboboxInputGroup>
  <MarkedComboboxContent>
    <MarkedComboboxEmpty>no matching tools.</MarkedComboboxEmpty>
    <MarkedComboboxList>
      {(tool) => <MarkedComboboxItem value={tool}>{tool.label}</MarkedComboboxItem>}
    </MarkedComboboxList>
  </MarkedComboboxContent>
</MarkedCombobox>

multiple

choices become removable marks

2 selected

compose a toolkit

each selection becomes a keyboard-reachable chip. backspace can remove the last chip without leaving the field.

included tools

states

the edge tells you what happened

open each field

empty query

tool

groups survive the search

labels are announced with their results

jump to

01marks3 searchable entries

02components3 searchable entries

03workflow2 searchable entries

reference

api

Base UI behavior, Cheez pressure

part	prop	type	default	purpose
Root	`items`	`Item[] \| Group[]`	`—`	source collection and built-in filtering
Root	`value`	`Item \| Item[] \| null`	`—`	controlled single or multiple selection
Root	`multiple`	`boolean`	`false`	enable removable selection chips
Root	`onValueChange`	`function`	`—`	selection callback
Root	`onInputValueChange`	`function`	`—`	query or async search callback
Root	`filter`	`function \| null`	`built in`	custom or server-side filtering
Root	`label`	`ReactNode`	`—`	native input label
Root	`error`	`ReactNode`	`—`	invalid state and alert message
Root	`size`	`small \| medium \| large`	`medium`	field density
Root	`tone`	`MarkedComboboxTone`	`orange`	field and popup ink
Root	`character`	`CheezCharacter`	`rushed`	drawing personality
Root	`interactionMark`	`CheezType`	`rounded-box`	input boundary
Root	`selectedMark`	`CheezType`	`check`	selected item symbol
Input	`placeholder`	`string`	`—`	query prompt
Content	`loading`	`boolean`	`false`	announced loading state
Content	`sideOffset`	`number`	`8`	popup gap
Item	`value`	`Item`	`—`	selectable value
Item	`disabled`	`boolean`	`false`	unavailable result
ChipRemove	`label`	`string`	`—`	accessible removal name

behavior notes

the input owns the accessible combobox role and a native label
Arrow Down opens and highlights, Enter selects, and Escape closes
typing filters the supplied items without a render-time effect
clear and chip removal are real buttons with explicit accessible names
the empty and loading regions stay mounted so announcements remain reliable
set filter to null when results come from a server
all popup positioning, focus management, and selection semantics come from Base UI
no Framer Motion is shipped