Database

Select Picker

Select, multi-select and status picker: selected tokens with search, the option list, and “Create” for new options.

Select an option or create one
Low
High
Medium

Usage

  • Use SelectPicker to edit select, multi-select and status values with search and inline option creation.
  • Pass onCreate only when people may add new options; without it the “Create” row is hidden.
  • Use onDone to close the surrounding popover after a single selection or Escape.
  • Don’t use it for plain form fields outside a database; use Select or Combobox instead.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/SelectPickerExample.tsx
import { useState } from 'react';
import { SelectPicker, type SelectOption } from '@krackedui/motion';

const priorityOptions: SelectOption[] = [
  { id: 'low', name: 'Low', color: 'yellow' },
  { id: 'high', name: 'High', color: 'default' },
  { id: 'medium', name: 'Medium', color: 'pink' },
];

export function SelectDemo() {
  const [value, setValue] = useState(['medium']);
  return <SelectPicker options={priorityOptions} value={value} onChange={setValue} />;
}

Examples

Multi-select with create

Select an option or create one
Design
Frontend
Docs
QA

Status

Select an option or create one
Not started
In progress
Done

Composition

anatomy
<SelectPicker>                  // 300 wide
  token area  → selected Tag × n (removable) · search input (role="combobox")
  label       "Select an option or create one"
  options     → role="option" × n: drag handle · Tag / StatusPill · "…"
  create row  → "Create <query>" (when onCreate and no exact match)
</SelectPicker>

API Reference

SelectPicker

Based on <div> and supports its props (except onChange). Adds:

PropTypeDefault
options
(SelectOption | StatusOption)[]
value
string[]
multi
boolean
false
status
boolean
false
onChange
(ids: string[]) => void
onCreate
(name: string) => SelectOption | undefined
onDone
() => void
width
number
300
autoFocus
boolean
false

Accessibility

  • The search input is a combobox; options are role="option" with aria-selected.
  • ArrowUp/ArrowDown move the active option, Enter selects (and closes a single select via onDone), Escape calls onDone, Backspace in an empty search removes the last token.
© 2026 Motion. Internal documentation.