Combobox

Stable

Fuzzy-searchable autocomplete popovers combining command palettes, custom keyboard navigation, and cyber glow halos.

Installation

$pnpm add @siberui/react

Import

tsx
import { Combobox } from '@siberui/react';

Basic Usage & Fuzzy Filter

Combobox provides typeahead filtering for large lists of options with keyboard arrow navigation.

Instantaneous search across 10,000+ federated nodes

tsx
<div className="max-w-sm w-full">
  <Combobox
    label="TARGET CLUSTER EGRESS"
    placeholder="Search and select cluster..."
    searchPlaceholder="Filter clusters by region/ID..."
    options={nodes}
    value={targetNode}
    onChange={setTargetNode}
    helperText="Instantaneous search across 10,000+ federated nodes"
  />
</div>

Neon Monospace Mode

Enable variant="neon" to illuminate both the trigger button and the popup menu with cyan laser outlines and monospace typography.

tsx
<div className="max-w-sm w-full">
  <Combobox
    variant="neon"
    label="TACTICAL DEFENSE AGENT"
    placeholder="Select active sentinel..."
    searchPlaceholder="Type agent codename..."
    options={agents}
    value={selectedAgent}
    onChange={setSelectedAgent}
  />
</div>

Validation States (Error & Success)

Pass error or success to visually color the combobox trigger border.

Mutual TLS handshake established

tsx
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
  <Combobox
    label="COMPROMISED NODE ROUTE"
    error="INVALID_ROUTE: Cryptographic gateway signature revoked"
    options={nodes}
    value="node-dublin"
  />

  <Combobox
    label="VERIFIED SECURE TUNNEL"
    success
    helperText="Mutual TLS handshake established"
    options={nodes}
    value="node-frankfurt"
  />
</div>

Frosted Cyber-Glass Cluster Target Finder

Construct glassmorphic node search dialogs layered on top of circuit textures with perimeter laser sweeps.

DATABASE CLUSTER SELECT
STANDBY
tsx
<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-6">
    <div className="flex items-center justify-between pb-4 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Server className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">DATABASE CLUSTER SELECT</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">STANDBY</Badge>
    </div>

    <Combobox
      variant="neon"
      label="ACTIVE POSTGRES CLUSTER"
      options={nodes}
      value={targetNode}
      onChange={setTargetNode}
    />

    <div className="pt-2">
      <Button variant="neon" glow className="w-full">
        CONNECT POOL
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Telemetry Search Matrix

Embed rapid node search fields into operational mission command dashboards.

THREAT VECTOR DISPATCH

ACTIVE

Search and allocate intercept sentinels to active incursions.

tsx
<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">THREAT VECTOR DISPATCH</CardTitle>
      <Badge variant="neon" size="sm">ACTIVE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Search and allocate intercept sentinels to active incursions.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <Combobox
      variant="neon"
      label="ASSIGNED INTERCEPT AGENT"
      options={agents}
      value={selectedAgent}
      onChange={setSelectedAgent}
    />

    <div className="pt-2 flex justify-end gap-3">
      <Button variant="secondary" size="sm">STAND DOWN</Button>
      <Button variant="neon" size="sm" glow>EXECUTE DISPATCH</Button>
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (10)← swipe to inspect →
PropertyDescriptionTypeDefault
options
Array of ComboboxOption objects with value and label strings.
ComboboxOption[]
[]
value
Controlled string value of the chosen option.
string
-
onChange
Callback fired whenever an item is selected or cleared.
(value: string) => void
-
variant
Visual style for trigger and popup menu.
"default" | "neon" | "glass"
"default"
placeholder
Text displayed on trigger button when no value is chosen.
string
"Select an option"
searchPlaceholder
Placeholder string for the internal popover search input.
string
"Search..."
emptyText
Message displayed when zero options match the search filter.
string
"No option found."
label
Monospace label linked above the combobox trigger.
string
-
error
Displays a high-priority warning message and activates danger state ring.
string | boolean
-
success
Activates emerald verified perimeter styling.
boolean
false

Accessibility

  • WAI-ARIA Combobox: Adheres to the WAI-ARIA Combobox design pattern, setting role="combobox" and aria-expanded.
  • Keyboard Filtering: Typing directly filters suggestions, and ArrowUp/ArrowDown keys cycle selection. Pressing Enter commits the selection.
  • Focus Retention: Closing the popover automatically returns focus to the trigger button.

Best Practices

  • Search Threshold: Use Combobox instead of standard Select when the option list exceeds 15 items to allow users to quickly search by prefix or keyword.
  • Empty States: Always specify a clear emptyText (e.g. "No matching server nodes found").