FormsGlass surface

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 and copy it

Framework example

Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.

Framework

Region

Density

Surface

Framework usage

Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens and ui-* class contract.

---
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>
  </>
)

<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>

Edit Select in browser

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

Glass

Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.

Framework

Framework usage

Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens and ui-* class contract.

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

<div class="docs-glass-demo" style="justify-items: center;">
  <Field style="min-width: min(100%, 22rem);">
    <Label for="glass-framework">Framework</Label>
    <Select
      id="glass-framework"
      glass="strong"
      options={['Astro', 'React', 'Web Components']}
      placeholder="Choose a framework"
    />
  </Field>
</div>

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

export const Example = () => (
  <>
    <div className="docs-glass-demo" style={{ justifyItems: 'center' }}>
      <Field style={{ minWidth: 'min(100%, 22rem)' }}>
        <Label htmlFor="glass-framework">Framework</Label>
        <Select
          id="glass-framework"
          glass="strong"
          options={['Astro', 'React', 'Web Components']}
          placeholder="Choose a framework"
        />
      </Field>
    </div>
  </>
)

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

  defineLumenElements()
</script>

<div class="docs-glass-demo" style="justify-items: center;">
  <lumen-field style="min-width: min(100%, 22rem);">
    <lumen-label for="glass-framework">Framework</lumen-label>
    <lumen-select
      id="glass-framework"
      glass="strong"
      options={['Astro', 'React', 'Web Components']}
      placeholder="Choose a framework"></lumen-select>
  </lumen-field>
</div>

Edit Select in browser

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.