Form

Select

Pick one option from a short list. The trigger looks like a text field; the list is a Motion menu with a check on the selected row and typeahead.

Usage

  • Use for 3–15 known options where only one can be picked.
  • Use Combobox for long lists (countries, people) where searching beats scrolling.
  • Use SegmentedControl or RadioGroup for 2–5 options that should stay visible.
  • Don’t use it for actions; that’s a Menu.

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/SelectExample.tsx
import { Field, Select } from '@krackedui/motion';

const plans = [
  { value: 'free', label: 'Free', description: 'For individuals' },
  { value: 'plus', label: 'Plus', description: 'For small teams' },
  { value: 'business', label: 'Business', description: 'SSO and advanced permissions' },
  { value: 'enterprise', label: 'Enterprise', description: 'Contact sales', disabled: true },
];

export function PlanSelect() {
  return (
    <Field label="Plan">
      <Select options={plans} placeholder="Choose a plan" />
    </Field>
  );
}

Examples

Controlled

Selected: member

"All" option (empty value)

An option with value: '' works as "no filter": value="" shows it and picking it reports ''.

With icons

Sizes

Invalid and disabled

Choose where your data is stored.

Dark theme

API Reference

Select

Radix Select. The ref goes to the trigger <button>.

PropTypeDefault
options
ControlOption[]
value / defaultValue
string
onValueChange
(value: string) => void
placeholder
string
"Select…"
size
"sm""md""lg"
"md"
invalid
boolean
false
disabled
boolean
false
required
boolean
false
name
string
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
id
string
className
string
style
CSSProperties
contentClassName
string
aria-label
string
aria-labelledby
string
aria-describedby
string

Accessibility

  • WAI-ARIA listbox (select-only combobox): the trigger is role="combobox" with aria-expanded; the list is role="listbox" with options and aria-selected.
  • Enter, Space, ↓ or ↑ open the list; ↑ / ↓ move; typing jumps to the first match (typeahead); Enter selects; Escape closes. Focus returns to the trigger.
  • Disabled options are skipped and marked aria-disabled.
  • With name, a hidden native <select> takes part in form submission and validation.
© 2026 Motion. Internal documentation.