SymbolCombobox

The SymbolCombobox component provides a user-friendly interface for searching and selecting trading pairs from available asset pairs.

Basic Usage

import { OrderbookSymbolCombobox } from '@krono/kit'

export const ComboboxBasic = () => {
  return (
    <OrderbookSymbolCombobox.Root>
      <OrderbookSymbolCombobox.Trigger />
      <OrderbookSymbolCombobox.Content />
    </OrderbookSymbolCombobox.Root>
  )
}

Anatomy

import { OrderbookSymbolCombobox } from '@krono/kit'

<OrderbookSymbolCombobox.Root>
  <OrderbookSymbolCombobox.Trigger />
  <OrderbookSymbolCombobox.Content>
    <OrderbookSymbolCombobox.Item />
  </OrderbookSymbolCombobox.Content>
</OrderbookSymbolCombobox.Root>

Examples

With Orderbook Integration

The symbol combobox automatically connects to the orderbook context and updates the trading pair.

import { Orderbook, OrderbookTable, OrderbookSymbolCombobox } from '@krono/kit'

export const ComboboxWithOrderbook = () => {
  return (
    <Orderbook.Root config={{ symbol: 'BTC/USD' }}>
      <div className="space-y-4">
        <div className="flex items-center justify-between p-4 border-b">
          <h2 className="text-lg font-semibold">Orderbook</h2>
          <OrderbookSymbolCombobox.Root>
            <OrderbookSymbolCombobox.Trigger />
            <OrderbookSymbolCombobox.Content />
          </OrderbookSymbolCombobox.Root>
        </div>

        <Orderbook.Panel
          renderTable={(props) => <OrderbookTable.Root {...props} />}
        />
      </div>
    </Orderbook.Root>
  )
}

Custom Trigger Button

Customize the appearance of the trigger button.

import { OrderbookSymbolCombobox } from '@krono/kit'

export const ComboboxCustomTrigger = () => {
  return (
    <OrderbookSymbolCombobox.Root>
      <OrderbookSymbolCombobox.Trigger className="w-48 font-semibold">
        Custom Label
      </OrderbookSymbolCombobox.Trigger>
      <OrderbookSymbolCombobox.Content />
    </OrderbookSymbolCombobox.Root>
  )
}

Custom Content Width

Adjust the width of the dropdown content.

import { OrderbookSymbolCombobox } from '@krono/kit'

export const ComboboxCustomWidth = () => {
  return (
    <OrderbookSymbolCombobox.Root>
      <OrderbookSymbolCombobox.Trigger />
      <OrderbookSymbolCombobox.Content className="w-80 p-0" />
    </OrderbookSymbolCombobox.Root>
  )
}

Custom Item Rendering

Use the Item component directly for complete customization.

import { OrderbookSymbolCombobox } from '@krono/kit'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandList,
} from '@krono/ui/components/ui/command'
import { useOrderbookSymbolComboboxContext } from '@krono/kit'

export const ComboboxCustomItems = () => {
  return (
    <OrderbookSymbolCombobox.Root>
      <OrderbookSymbolCombobox.Trigger />
      <OrderbookSymbolCombobox.Content>
        <CustomContent />
      </OrderbookSymbolCombobox.Content>
    </OrderbookSymbolCombobox.Root>
  )
}

function CustomContent() {
  const { symbols, currentSymbol, onSelectSymbol } =
    useOrderbookSymbolComboboxContext()

  return (
    <Command>
      <CommandInput placeholder="Search trading pairs..." />
      <CommandList>
        <CommandEmpty>No trading pair found.</CommandEmpty>
        <CommandGroup heading="Available Pairs">
          {symbols?.map((option) => (
            <OrderbookSymbolCombobox.Item
              key={option.value}
              option={option}
              isSelected={currentSymbol === option.value}
              onSelect={onSelectSymbol}
            >
              <div className="flex items-center justify-between w-full">
                <span>{option.displayLabel}</span>
                <span className="text-xs text-muted-foreground">
                  {option.baseAsset}/{option.quoteAsset}
                </span>
              </div>
            </OrderbookSymbolCombobox.Item>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Controlled State

Control the open/close state externally.

import { useState } from 'react'
import { OrderbookSymbolCombobox } from '@krono/kit'

export const ComboboxControlled = () => {
  const [open, setOpen] = useState(false)

  return (
    <div className="space-y-4">
      <button onClick={() => setOpen(!open)}>
        Toggle Combobox
      </button>

      <OrderbookSymbolCombobox.Root
        open={open}
        onOpenChange={setOpen}
      >
        <OrderbookSymbolCombobox.Trigger />
        <OrderbookSymbolCombobox.Content />
      </OrderbookSymbolCombobox.Root>
    </div>
  )
}

Place the symbol selector in a navigation bar.

import { Orderbook, OrderbookTable, OrderbookSymbolCombobox } from '@krono/kit'

export const ComboboxInNav = () => {
  return (
    <Orderbook.Root config={{ symbol: 'BTC/USD' }}>
      <div className="h-screen flex flex-col">
        <nav className="border-b p-4">
          <div className="flex items-center justify-between max-w-7xl mx-auto">
            <h1 className="text-xl font-bold">Trading Platform</h1>

            <OrderbookSymbolCombobox.Root>
              <OrderbookSymbolCombobox.Trigger />
              <OrderbookSymbolCombobox.Content />
            </OrderbookSymbolCombobox.Root>
          </div>
        </nav>

        <main className="flex-1 overflow-hidden">
          <Orderbook.Panel
            renderTable={(props) => <OrderbookTable.Root {...props} />}
          />
        </main>
      </div>
    </Orderbook.Root>
  )
}

With Custom Icon

Customize the icon display for each symbol.

import { OrderbookSymbolCombobox } from '@krono/kit'

export const ComboboxCustomIcon = () => {
  return (
    <OrderbookSymbolCombobox.Root>
      <OrderbookSymbolCombobox.Trigger />
      <OrderbookSymbolCombobox.Content>
        {/* Icon component handles fallbacks automatically */}
      </OrderbookSymbolCombobox.Content>
    </OrderbookSymbolCombobox.Root>
  )
}

Components

Root

Wrapper component that provides context and manages state.

<OrderbookSymbolCombobox.Root open={open} onOpenChange={setOpen}>
  {/* Trigger and Content components */}
</OrderbookSymbolCombobox.Root>

Features:

Manages open/close state
Fetches available symbols from asset pairs configuration
Handles symbol selection and orderbook updates
Provides context to child components

Trigger

Button that opens the symbol selection dropdown.

<OrderbookSymbolCombobox.Trigger className="w-48" />

Features:

Shows currently selected symbol with icon
Displays loading state while fetching symbols
Automatically disabled during loading or on error
Supports custom children for complete customization

Content

Dropdown panel containing the symbol list and search.

<OrderbookSymbolCombobox.Content className="w-80 p-0" />

Features:

Built-in search functionality
Loading and error states
Empty state when no symbols found
Default implementation with Command component
Supports custom children for full control

Item

Individual symbol item in the dropdown list.

<OrderbookSymbolCombobox.Item
  option={option}
  isSelected={selected}
  onSelect={handleSelect}
/>

Features:

Displays symbol icon and label
Shows check mark for selected symbol
Handles click/keyboard selection
Supports custom children for layout control

Icon

Symbol icon component with automatic fallback.

<OrderbookSymbolCombobox.Icon
  src={iconUrl}
  alt={symbolName}
/>

Features:

Loads symbol icon from URL
Automatic fallback to first letter on error
Consistent sizing and styling

Props

Root

boolean

Controlled open state of the dropdown.

(open: boolean) => void

Callback fired when the open state changes.

Trigger

string

Additional CSS classes for styling the trigger button.

ReactNode

Custom content to display in the trigger. When provided, replaces the default symbol display.

Content

string

Additional CSS classes for styling the dropdown content.Default: "w-60 p-0"

ReactNode

Custom content to display in the dropdown. When provided, replaces the default command list.

Item

AssetPairOption

required

The symbol option data to display.

Show AssetPairOption properties

string

The symbol value (e.g., ‘BTC/USD’)

string

Display label for the symbol

string

Base currency (e.g., ‘BTC’)

string

Quote currency (e.g., ‘USD’)

string

URL to the symbol icon

string

Alternative name for the symbol

number

Minimum price increment

boolean

required

Whether this symbol is currently selected.

(value: string) => void

required

Callback fired when the symbol is selected.

string

Additional CSS classes for styling the item.

ReactNode

Custom content to display. When provided, replaces the default label.

Icon

string

required

URL of the icon image.

string

required

Alt text for the icon (used in fallback).

string

Additional CSS classes for styling the icon.

Context Hook

Access the symbol combobox context in custom components.

import { useOrderbookSymbolComboboxContext } from '@krono/kit'

function CustomComponent() {
  const {
    open,
    setOpen,
    symbols,
    symbolMap,
    loading,
    error,
    selectedSymbol,
    currentSymbol,
    onSelectSymbol,
  } = useOrderbookSymbolComboboxContext()

  // Your custom logic
}

Context Properties:

open: boolean - Current open state
setOpen: (open: boolean) => void - Update open state
symbols: AssetPairOption[] - Available symbols
symbolMap: Map<string, AssetPairOption> - Symbol lookup map
loading: boolean - Loading state
error: Error | null - Error state
selectedSymbol: AssetPairOption | null - Currently selected symbol object
currentSymbol: string - Current symbol string value
onSelectSymbol: (value: string) => void - Select symbol handler

Search Behavior

The built-in search matches against:

Symbol value (e.g., “BTC/USD”)
Display label
Alternative name
Base and quote assets

The search is case-insensitive and updates results in real-time.

Notes

The SymbolCombobox must be used within an OrderbookProvider or Orderbook.RootProvider context to access symbol data and update the orderbook.

The component automatically handles symbol initialization, selecting the first available symbol if none is set.

Introduction

Configuration

Components

SymbolCombobox

Basic Usage

Anatomy

Examples

With Orderbook Integration

Custom Trigger Button

Custom Content Width

Custom Item Rendering

Controlled State

In Navigation Bar

With Custom Icon

Components

Root

Trigger

Content

Item

Icon

Props

Root

Trigger

Content

Item

Icon

Context Hook

Search Behavior

Notes

​Basic Usage

​Anatomy

​Examples

​With Orderbook Integration

​Custom Trigger Button

​Custom Content Width

​Custom Item Rendering

​Controlled State

​In Navigation Bar

​With Custom Icon

​Components

​Root

​Trigger

​Content

​Item

​Icon

​Props

​Root

​Trigger

​Content

​Item

​Icon

​Context Hook

​Search Behavior

​Notes

Basic Usage

Anatomy

Examples

With Orderbook Integration

Custom Trigger Button

Custom Content Width

Custom Item Rendering

Controlled State

In Navigation Bar

With Custom Icon

Components

Root

Trigger

Content

Item

Icon

Props

Root

Trigger

Content

Item

Icon

Context Hook

Search Behavior

Notes