GGenomics UI
Components/Controls

Select

@genomics/select

Compact dependency-free dropdown.

Preview

Color
Height
200
Sample kinase domain
279 aa · 1–279
279 aa
Use arrow keys to move along the sequence, Shift plus arrow to jump ten, Home and End for the ends, Enter to select, Space to add to the selection, Escape to clear.

tooltip + select + slider, all dependency-free, driving a live viewer.

About

Color scheme, reference row, track visibility, color-by mode. A button trigger plus a floating listbox that closes on outside-click or Escape and supports up/down/enter — the small amount of a select anyone actually needs, without the dependency.

Usage

import { Select } from "@/components/ui/select"

<Select
  aria-label="Color mode"
  value={colorMode}
  onValueChange={setColorMode}
  options={[{ value: "block", label: "Block" }, { value: "letter", label: "Letter" }]}
/>
Registry dependencies
@genomics/utils
npm dependencies
lucide-react
Source: components/ui/select.tsx