Select

Provides an enhanced single-choice list when text search is not needed.

View preview API reference View in Figma

FrameworksAstro · React · Elements

Registry commandlumen add Select

InteractionEnhanced runtime

Design sourceLinked component node

See it in context

Preview

Framework

Region

Density

Surface

Copy a working example

Usage

Astro examples assume UIPrimitives is mounted once in your root layout. Do not add the runtime next to each component instance.

---
import { Select } from '@santi020k/lumen-astro'
---

<div style="display: grid; gap: 0.75rem; max-width: 20rem;">
  <label for="ex-select-framework">Framework</label>
  <Select id="ex-select-framework" name="framework" placeholder="Pick a framework">
    <option value="astro">Astro</option>
    <option value="react">React</option>
    <option value="elements">Web Components</option>
  </Select>
  <label for="ex-select-region">Region</label>
  <Select
    id="ex-select-region"
    name="region"
    options={[
      { label: 'US East', value: 'us-east' },
      { label: 'EU West', value: 'eu-west' },
      { disabled: true, label: 'APAC (soon)', value: 'apac' }
    ]}
    placeholder="Options via prop"
    size="sm"
  />
  <label for="ex-select-density">Density</label>
  <Select id="ex-select-density" name="density" placeholder="Large select" size="lg">
    <option value="compact">Compact</option>
    <option value="comfortable">Comfortable</option>
  </Select>
  <label for="ex-select-surface">Surface</label>
  <Select
    glass="subtle"
    id="ex-select-surface"
    name="surface"
    options={['Canvas', 'Surface', 'Glass']}
    placeholder="Glass enhanced select"
  />
</div>

---
import { Select } from '@santi020k/lumen-astro'
---

<div style="display: grid; gap: 0.75rem; max-width: 20rem;">
  <label for="ex-select-framework">Framework</label>
  <Select id="ex-select-framework" name="framework" placeholder="Pick a framework">
    <option value="astro">Astro</option>
    <option value="react">React</option>
    <option value="elements">Web Components</option>
  </Select>
  <label for="ex-select-region">Region</label>
  <Select
    id="ex-select-region"
    name="region"
    options={[
      { label: 'US East', value: 'us-east' },
      { label: 'EU West', value: 'eu-west' },
      { disabled: true, label: 'APAC (soon)', value: 'apac' }
    ]}
    placeholder="Options via prop"
    size="sm"
  />
  <label for="ex-select-density">Density</label>
  <Select id="ex-select-density" name="density" placeholder="Large select" size="lg">
    <option value="compact">Compact</option>
    <option value="comfortable">Comfortable</option>
  </Select>
  <label for="ex-select-surface">Surface</label>
  <Select
    glass="subtle"
    id="ex-select-surface"
    name="surface"
    options={['Canvas', 'Surface', 'Glass']}
    placeholder="Glass enhanced select"
  />
</div>

import { Select } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div style={{ display: 'grid', gap: '0.75rem', maxWidth: '20rem' }}>
      <label htmlFor="ex-select-framework">Framework</label>
      <Select id="ex-select-framework" name="framework" placeholder="Pick a framework">
        <option value="astro">Astro</option>
        <option value="react">React</option>
        <option value="elements">Web Components</option>
      </Select>
      <label htmlFor="ex-select-region">Region</label>
      <Select
        id="ex-select-region"
        name="region"
        options={[
          { label: 'US East', value: 'us-east' },
          { label: 'EU West', value: 'eu-west' },
          { disabled: true, label: 'APAC (soon)', value: 'apac' }
        ]}
        placeholder="Options via prop"
        size="sm"
      />
      <label htmlFor="ex-select-density">Density</label>
      <Select id="ex-select-density" name="density" placeholder="Large select" size="lg">
        <option value="compact">Compact</option>
        <option value="comfortable">Comfortable</option>
      </Select>
      <label htmlFor="ex-select-surface">Surface</label>
      <Select
        glass="subtle"
        id="ex-select-surface"
        name="surface"
        options={['Canvas', 'Surface', 'Glass']}
        placeholder="Glass enhanced select"
      />
    </div>
  </>
)

import { Select } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div style={{ display: 'grid', gap: '0.75rem', maxWidth: '20rem' }}>
      <label htmlFor="ex-select-framework">Framework</label>
      <Select id="ex-select-framework" name="framework" placeholder="Pick a framework">
        <option value="astro">Astro</option>
        <option value="react">React</option>
        <option value="elements">Web Components</option>
      </Select>
      <label htmlFor="ex-select-region">Region</label>
      <Select
        id="ex-select-region"
        name="region"
        options={[
          { label: 'US East', value: 'us-east' },
          { label: 'EU West', value: 'eu-west' },
          { disabled: true, label: 'APAC (soon)', value: 'apac' }
        ]}
        placeholder="Options via prop"
        size="sm"
      />
      <label htmlFor="ex-select-density">Density</label>
      <Select id="ex-select-density" name="density" placeholder="Large select" size="lg">
        <option value="compact">Compact</option>
        <option value="comfortable">Comfortable</option>
      </Select>
      <label htmlFor="ex-select-surface">Surface</label>
      <Select
        glass="subtle"
        id="ex-select-surface"
        name="surface"
        options={['Canvas', 'Surface', 'Glass']}
        placeholder="Glass enhanced select"
      />
    </div>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div style="display: grid; gap: 0.75rem; max-width: 20rem;">
  <label for="ex-select-framework">Framework</label>
  <lumen-select id="ex-select-framework" name="framework" placeholder="Pick a framework">
    <option value="astro">Astro</option>
    <option value="react">React</option>
    <option value="elements">Web Components</option>
  </lumen-select>
  <label for="ex-select-region">Region</label>
  <lumen-select
    id="ex-select-region"
    name="region"
    options={[
      { label: 'US East', value: 'us-east' },
      { label: 'EU West', value: 'eu-west' },
      { disabled: true, label: 'APAC (soon)', value: 'apac' }
    ]}
    placeholder="Options via prop"
    size="sm"></lumen-select>
  <label for="ex-select-density">Density</label>
  <lumen-select id="ex-select-density" name="density" placeholder="Large select" size="lg">
    <option value="compact">Compact</option>
    <option value="comfortable">Comfortable</option>
  </lumen-select>
  <label for="ex-select-surface">Surface</label>
  <lumen-select
    glass="subtle"
    id="ex-select-surface"
    name="surface"
    options={['Canvas', 'Surface', 'Glass']}
    placeholder="Glass enhanced select"></lumen-select>
</div>

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div style="display: grid; gap: 0.75rem; max-width: 20rem;">
  <label for="ex-select-framework">Framework</label>
  <lumen-select id="ex-select-framework" name="framework" placeholder="Pick a framework">
    <option value="astro">Astro</option>
    <option value="react">React</option>
    <option value="elements">Web Components</option>
  </lumen-select>
  <label for="ex-select-region">Region</label>
  <lumen-select
    id="ex-select-region"
    name="region"
    options={[
      { label: 'US East', value: 'us-east' },
      { label: 'EU West', value: 'eu-west' },
      { disabled: true, label: 'APAC (soon)', value: 'apac' }
    ]}
    placeholder="Options via prop"
    size="sm"></lumen-select>
  <label for="ex-select-density">Density</label>
  <lumen-select id="ex-select-density" name="density" placeholder="Large select" size="lg">
    <option value="compact">Compact</option>
    <option value="comfortable">Comfortable</option>
  </lumen-select>
  <label for="ex-select-surface">Surface</label>
  <lumen-select
    glass="subtle"
    id="ex-select-surface"
    name="surface"
    options={['Canvas', 'Surface', 'Glass']}
    placeholder="Glass enhanced select"></lumen-select>
</div>

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

pnpm add @santi020k/lumen-astro

pnpm add @santi020k/lumen-astro

lumen add Select

lumen add Select

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add Select --target react

lumen add Select --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add Select --target elements

lumen add Select --target elements

API reference

Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.

Attribute	Values	Default	Description
glass	boolean \| "subtle" \| "strong"	false	Applies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity.
options	Array<string \| { label, value, disabled? }>	[]	Creates native option elements.
placeholder	string	-	Adds a disabled placeholder option and trigger placeholder text.
size	"default" \| "sm" \| "md" \| "lg"	"default"	Controls select height and font size. The md value maps to the default size.
disabled	boolean	false	Disables the native select and enhanced trigger.
required	boolean	false	Forwards required validation to the native select.
value	string \| number	-	Selects the matching option value.
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.

Keyboard interactions

Keyboard behavior provided by the Astro UIPrimitives runtime for this component.

Key	Action
Printable key on trigger or option	Open the listbox and focus the next enabled option whose text starts with the typed buffer.
Escape on trigger or option	Close the listbox. Escape on an option also returns focus to the trigger.
ArrowDown, ArrowUp on trigger	Open the listbox and focus the next or previous enabled option.
Home, End on trigger	Open the listbox and focus the first or last enabled option.
Enter, Space on trigger	Open the listbox and focus the selected option, or the first enabled option.
Enter, Space on an option	Select the focused option, sync the native select, and dispatch native input and change events from the select.
ArrowDown, ArrowUp on an option	Move focus through enabled options, wrapping at the ends.
Home, End on an option	Move focus to the first or last enabled option.