Select

Interactive

See Select in Storybook for every variant, with live controls.

A native <select> in Eidos chrome. Use it for short, known lists; reach for Autocomplete once the list is long enough to need searching.

import { Select } from "@kairosis/eidos";

<Select
  label="Environment"
  placeholder="Choose an environment"
  options={[
    { value: "prod", label: "Production" },
    { value: "staging", label: "Staging" },
  ]}
  value={env}
  onChange={(e) => setEnv(e.target.value)}
/>;

Props

Prop	Type	Default	Description
label	string	—	Rendered above the control
options	(string | SelectOption)[]	—	Required. A bare string is shorthand for { value, label }
placeholder	string	—	Disabled first option, shown while the value is empty
size	"sm" | "md" | "lg"	"md"	28 / 36 / 44px
className / style		—	Target the outer wrapper

SelectOption is { value: string; label: string }. Also accepts every <select> attribute — onChange receives the native event, so read e.target.value. Forwards a ref.

Guidelines

• Because it's a real <select>, it gets native keyboard behaviour and the platform's mobile picker for free.
• The chevron is decorative and pointer-events: none — clicks pass through to the select.
• With a placeholder and no value, the text renders in the faint colour so it doesn't read as a choice.