Dot.SYSTEM

Select

Contextual selection menus. Select components provide a list of options for users to choose from in a compact space.

Usage

Use the Select component when you have a predefined list of options (ideally more than 4, otherwise consider using **Radio Group**). It's perfect for system settings, form filters, and choosing categories.

Content

Basic Selection

Choosing a preferred theme or category.

Spec

  • Primitive: Built on `@radix-ui/react-select`.
  • Trigger: 12px padding, 2px solid #E5E5E5, Focus: Primary border.
  • Menu: White background, shadow-md, smooth entry animations.
  • Item: 8px vertical padding, Hover: Primary accent (10%).
  • Typography: sm/medium font weight for accessibility.
  • Radius: 0.5rem (Standard system radius).

Anatomy

SELECT OVERLAY