Primitive / Atom

Select

Native select with glass, liquid, matte, and utility variants.

Edit on GitHub

pnpm dlx @glinui/cli@latest add select

Preferences

Applies to every workspace you belong to.

Language

Used for menus and emails.

Time zone

Schedules and digests follow it.

Date format

How dates appear in tables.

Installation

Install from

pnpm dlx @glinui/cli@latest add select

Prefer the package?

Usage

Sizes

import { Select } from "@glinui/ui"


const opts = [{ value: "a", label: "Alpha" }, { value: "b", label: "Beta" }]


export function Demo() {
  return (
    <div className="space-y-3 max-w-xs">
      <Select size="sm" options={opts} placeholder="Small" />
      <Select size="md" options={opts} placeholder="Medium" />
      <Select size="lg" options={opts} placeholder="Large" />
    </div>
  )
}

Variants

import { Select } from "@glinui/ui"


export function Demo() {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      <Select variant="glinr" options={[{ value: "a", label: "Alpha" }, { value: "b", label: "Beta" }]} placeholder="glinr" />
      <Select variant="solid" options={[{ value: "a", label: "Alpha" }, { value: "b", label: "Beta" }]} placeholder="solid" />
      <Select variant="plain" options={[{ value: "a", label: "Alpha" }, { value: "b", label: "Beta" }]} placeholder="plain" />
      <Select variant="soft" options={[{ value: "a", label: "Alpha" }, { value: "b", label: "Beta" }]} placeholder="soft" />
      <Select variant="outline" options={[{ value: "a", label: "Alpha" }, { value: "b", label: "Beta" }]} placeholder="outline" />
      <Select variant="ghost" options={[{ value: "a", label: "Alpha" }, { value: "b", label: "Beta" }]} placeholder="ghost" />
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a backdrop behind it: pick Photo or Vivid in the stage backdrop switcher.

import { Select } from "@glinui/ui"


export function Demo() {
  return (
    <Select variant="glass" options={[{ value: "a", label: "Alpha" }, { value: "b", label: "Beta" }]} placeholder="Glass" />
  )
}

Surface Variants

import { Select } from "@glinui/ui"

const options = [
  { label: "Alpha", value: "alpha" },
  { label: "Beta", value: "beta" }
]

export function SelectVariantsDemo() {
  return (
    <div className="space-y-3">
      <Select variant="default" aria-label="Default select" options={options} placeholder="Default" />
      <Select variant="glass" aria-label="Glass select" options={options} placeholder="Glass" />
      <Select variant="liquid" aria-label="Liquid select" options={options} placeholder="Liquid" />
      <Select variant="matte" aria-label="Matte select" options={options} placeholder="Matte" />
      <Select variant="outline" aria-label="Outline select" options={options} placeholder="Outline" />
      <Select variant="ghost" aria-label="Ghost select" options={options} placeholder="Ghost" />
    </div>
  )
}

With Placeholder

import { Select } from "@glinui/ui"

export function SelectPlaceholderDemo() {
  return (
    <Select
      aria-label="Placeholder select"
      options={[{ label: "Option A", value: "a" }, { label: "Option B", value: "b" }]}
      placeholder="Choose an option..."
    />
  )
}

Disabled Option

import { Select } from "@glinui/ui"

export function SelectDisabledOptionDemo() {
  return (
    <Select
      aria-label="Status select"
      options={[
        { label: "Available", value: "available" },
        { label: "Unavailable", value: "unavailable", disabled: true },
        { label: "Also available", value: "also" }
      ]}
      placeholder="Select status"
    />
  )
}

Disabled Select

import { Select } from "@glinui/ui"

export function SelectDisabledDemo() {
  return (
    <Select
      aria-label="Disabled select"
      disabled
      options={[{ label: "React", value: "react" }]}
      placeholder="Disabled select"
    />
  )
}

Accessibility

Native `select` semantics with keyboard navigation.
Pair with `<label>` or `aria-label`.
Renders a native `<select>` element for maximum browser and assistive technology compatibility.
Pair with a `<label>` using `htmlFor` or provide an `aria-label` when no visible label exists.
Placeholder text should not be used as the sole accessible label.
Disabled individual options use the native `disabled` attribute on `<option>` elements.

Keyboard Interactions

Key	Action
`Enter / Space`	Open the select dropdown.
`Arrow Up / Down`	Navigate options.

ARIA Attributes

`role="combobox"` native
`aria-expanded`
`aria-selected`

Reduced Motion

No animation dependencies.

Select does not use custom animations; open/close behavior is controlled by the browser's native dropdown.

API Reference

Prop	Type	Required	Default	Description
`options`	`SelectOption[]`	Yes	`-`	Array of { label, value, disabled? }.
`placeholder`	`string`	No	`-`	Disabled placeholder option text.
`variant`	`ControlVariantProp`	No	`ambient (glinr)`	Surface look. Omit to follow the ambient design style. Glass is opt-in.
`size`	`unknown`	No	`md`	Height scale.
`disabled`	`boolean`	-	`false`	Disables interaction.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Select } from "@glinui/ui"

Source Files

select.tsx

select.test.tsxtest

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/select.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

SelectProps

`SelectProps`

Prop	Type	Required	Default	Description
`options`	`SelectOption[]`	Yes	`-`	-
`placeholder`	`string`	No	`-`	-
`size`	`unknown`	No	`"md"`	Variant option from selectSizeVariants.
`variant`	`ControlVariantProp`	No	`-`	Surface look. Omit to follow the ambient design style. Same vocabulary as Input.