Implementation:TobikoData Sqlmesh Selector

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Design_System, Forms
Last Updated	2026-02-07 20:00 GMT

Overview

Selector is a styled dropdown select component built on Radix UI Select with keyboard navigation, scrollable options, and consistent theming.

Description

The Selector component wraps Radix UI's Select primitive to provide a fully accessible dropdown with SQLMesh's design system styling. It renders a trigger button with a chevron icon that opens a portal-based dropdown containing scrollable options. The component implements automatic disabling when the list has fewer than two items, preventing unnecessary interaction. It uses Radix UI's composition model with Select.Root for state management, Select.Trigger for the button, Select.Portal for overlay rendering, and Select.Content for the dropdown panel. The dropdown includes scroll buttons with chevron icons for navigating long lists and uses Select.Item components with check indicators for selected values. The component supports size variants that adjust typography and applies consistent focus and hover states with brand color highlighting.

Usage

Use Selector for dropdown selection inputs throughout forms and configuration interfaces. It provides accessible keyboard navigation and consistent styling across light and dark themes.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/input/Selector.tsx

Signature

export interface PropsSelector {
  list: Array<{ text: string; value: string }>
  onChange: (value: string) => void
  size?: Size
  name?: string
  value?: string
  disabled?: boolean
  required?: boolean
  autoFocus?: boolean
  className?: string
}

export default React.forwardRef<HTMLButtonElement, PropsSelector>(
  function Selector(props: PropsSelector, ref?: React.Ref<HTMLButtonElement>): JSX.Element
)

Import

import Selector from '@components/input/Selector'

I/O Contract

Inputs

Name	Type	Required	Description
list	Array<{text: string, value: string}>	Yes	Options to display in dropdown
onChange	Function	Yes	Callback invoked when selection changes
value	string	No	Currently selected value
size	Size	No	Size variant (sm, md, lg)
name	string	No	Form field name
disabled	boolean	No	Disable selector (auto-disabled if list.length < 2)
required	boolean	No	Mark field as required
autoFocus	boolean	No	Auto-focus on mount
className	string	No	Additional CSS classes for trigger

Outputs

Name	Type	Description
JSX.Element	React component	Dropdown select with trigger and portal overlay

Usage Examples

import Selector from '@components/input/Selector'
import Input from '@components/input/Input'
import { EnumSize } from '~/types/enum'

function EnvironmentSelector() {
  const [environment, setEnvironment] = useState('dev')

  const environments = [
    { text: 'Development', value: 'dev' },
    { text: 'Staging', value: 'staging' },
    { text: 'Production', value: 'prod' },
  ]

  return (
    <Input
      label="Environment"
      info="Select target environment"
      size={EnumSize.md}
    >
      <Selector
        list={environments}
        value={environment}
        onChange={setEnvironment}
        size={EnumSize.md}
        required
      />
    </Input>
  )
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment