form
Combobox
Searchable select composed from Command and Popover.
Canonical sourcePreview
This newly registered component is fully installable and documented. Its dedicated interactive showcase is generated in the extended preview pass; use the canonical source and API contract below in the meantime.
Installation
$bash
npx neoncite@latest add combobox
Dependencies
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Extends the Neoncite classes without replacing semantic behavior. |
| options | ComboboxOption[] | — | Searchable value/label options. |
| value | string | — | Controlled selected value. |
| defaultValue | string | "" | Initial uncontrolled value. |
| onValueChange | (value: string) => void | — | Called when an option is selected. |
| …native / primitive props | varies | — | Forwards the underlying React/HTML props where exposed by the component type. |
States
- • default
- • hover
- • focus-visible
- • disabled
- • selected/checked/open where applicable
- • invalid when composed with validation
Accessibility
- • Uses native HTML semantics where practical; provide an accessible name for icon-only or content-dependent controls.
- • Neoncite focus-visible treatment must remain visible against OLED surfaces.
- • Decorative glow, scan, pulse, and transition effects must not be the only indication of state.
- • All non-essential animation must respect prefers-reduced-motion.
Keyboard interactions
Tab / Shift+TabMoves focus through interactive controls in document order.
Enter / SpaceActivates the focused control when supported by its native or primitive semantics.
Composition
- • Install with `npx neoncite add combobox`; registry dependencies are resolved recursively.
- • Composes Neoncite primitives: button, command, popover. Customize those primitives rather than duplicating their behavior.
Token contract
--surface-0…3--hairline--foreground--muted-foreground--primary / --ringsemantic neon/glow tokens where usedSSR / hydration
No special SSR requirement beyond the underlying React/Radix dependency. Interactive client components are marked where required.
RTL
Layout uses logical flow where practical; verify icon direction for directional controls in RTL products.