Design SystemComponentsSelect

Select

Installation

import { Icon, Select } from "@olab/components";

Overview

從一串選項裡選一個（或多個）值。預設觸發元素是一顆小的 secondary Button，上面顯示目前選的值；打開時按鈕呈選中狀態，選單從右下方展開。

選中的項目會用品牌淡底、品牌色字和右側勾號標出；開 multiselect 時可以勾很多個。

Interactive Demo

SINGLE-SELECT — pick an asset

value = "btc"

State Matrix

TRIGGER — default / with description / disabled (real component)

default
description
disabled

OPEN PANEL — static replica, each item state forced on

Description (optional)
Bitcoin default
Ethereum hover (sim)
Solana selected
Polygon disabled

Examples

MULTI-SELECT — checked items accumulate

value = ["btc","eth"]

EMPTY OPTIONS — emptyMenu slot or default fallback

Spec

PartValueSource class
Triggersecondary Button sm（28px）+ 上下箭頭圖示；打開時呈選中Button size=sm skin=secondary active={open}
Panel最小寬 160px，內距 12px，20px 圓角，項目間距 4pxmin-w-40 p-3 gap-1 rounded-2xl border bg-primary
Description12px，次要文字text-bodyS text-tertiary
Item最小高 36px，左右 8px，圓角 4pxmin-h-9 px-2 rounded
Item · hover淡底hover:bg-secondary
Item · selected品牌淡底 + 品牌色字 + 勾號data-[state=checked]:bg-primary-active text-brand-secondary
Item · disabled淡字，不能點data-[disabled]:text-quaternary
Empty14px 一行說明text-bodyM text-tertiary px-4 py-2
Placement觸發元素右下方對齊bottom-end

數值為 2026-06-10 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/select.md。

Usage

Do

  • 從 3 個以上的固定選項選一個值：排序方式、資產、時間區間。
  • 選項需要補充說明時用 description，放在選單最上方。
  • 選項為空時給 emptyMenu 一句說明，告訴使用者為什麼沒東西。

Don't

  • 只有 2–3 個選項而且要一直看得到時，不要藏進 Select；用 Tabs 或一排 Button。
  • 不要拿 Select 觸發動作；動作請用 Menu。
  • 不要用 className 改選中項的顏色；選中的樣子由元件決定。