Select

Select

<Select label="Country" defaultSelectedKey="kr">
  <Option id="kr">Korea</Option>
  <Option id="jp">Japan</Option>
  <Option id="us">United States</Option>
</Select>

Install: @helixui/core

import { Select, Option } from '@helixui/core'

status: stable · since: 0.1.0

Tags: picker, dropdown, single-value

Anatomy

[ Selected value         ▾ ]
   ╭──── popover ───╮
   │ • Option A     │
   │ • Option B  ✓  │
   │ • Option C     │
   ╰────────────────╯

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width, hugs height
• stackable — false
• fullBleed — false

Visual

A trigger button styled like a TextInput with a trailing chevron. On open, a popover listbox appears anchored to the trigger; selected option is checkmarked.

Props

Name	Type	Default	Description
label	ReactNode	—	Visible label.
description	ReactNode	—	Helper text.
errorMessage	string | (v: ValidationResult) => string	—	Error text.
placeholder	string	Select…	Shown when nothing is selected.
size	'sm' | 'md' | 'lg'	md	Trigger height.
selectedKey	Key | null	—	Controlled selected option.
defaultSelectedKey	Key	—	Uncontrolled initial.
onSelectionChange	(key: Key) => void	—	Selection change handler.

Slots

• children — Option components

Tokens used

color.bg.surface.default, color.bg.action.neutral.default, color.bg.action.brand.subtle, color.border.default, color.border.focus, color.text.primary, color.text.secondary, color.text.muted, color.text.action.brand, color.text.action.danger, radius.md, space.1, space.2, space.3, font.family.sans, font.size.sm, font.size.md, font.size.lg, font.weight.medium, shadow.md

Accessibility

Role: combobox

Keyboard

Key	Action
ArrowDown	Open / move down.
Enter	Select highlighted option.
Escape	Close.

Composes with

Component	Relation	Note
Field	wraps	Built-in label/description/error.
Form	parent	Submitted as part of a Form.
MultiSelect	alternative	MultiSelect for multiple values.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

country picker

“select with three options”

<Select label="Country" value={country} onChange={setCountry}>
  <Option value="us">United States</Option>
  <Option value="kr">Korea</Option>
  <Option value="jp">Japan</Option>
</Select>

Related

• MultiSelect