Primitive / Atomstable

Select

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

@glinui/uiComponent: select

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add select

Usage$

TSX

1import { Select } from "@glinui/ui"
2
3export function SelectBasicDemo() {
4return (
5  <Select
6    aria-label="Framework"
7    options={[
8      { label: "React", value: "react" },
9      { label: "Vue", value: "vue" },
10      { label: "Svelte", value: "svelte" }
11    ]}
12    placeholder="Pick a framework"
13  />
14)
15}

Examples$

Sizes$

TSX

1import { Select } from "@glinui/ui"
2
3const opts = [
4{ label: "Alpha", value: "alpha" },
5{ label: "Beta", value: "beta" },
6{ label: "Gamma", value: "gamma" }
7]
8
9export function SelectSizesDemo() {
10return (
11  <div className="space-y-3">
12    <Select size="sm" aria-label="Small size select" options={opts} placeholder="Small" />
13    <Select size="md" aria-label="Medium size select" options={opts} placeholder="Medium" />
14    <Select size="lg" aria-label="Large size select" options={opts} placeholder="Large" />
15  </div>
16)
17}

Surface Variants$

TSX

1import { Select } from "@glinui/ui"
2
3const options = [
4{ label: "Alpha", value: "alpha" },
5{ label: "Beta", value: "beta" }
6]
7
8export function SelectVariantsDemo() {
9return (
10  <div className="space-y-3">
11    <Select variant="default" aria-label="Default select" options={options} placeholder="Default" />
12    <Select variant="glass" aria-label="Glass select" options={options} placeholder="Glass" />
13    <Select variant="liquid" aria-label="Liquid select" options={options} placeholder="Liquid" />
14    <Select variant="matte" aria-label="Matte select" options={options} placeholder="Matte" />
15    <Select variant="outline" aria-label="Outline select" options={options} placeholder="Outline" />
16    <Select variant="ghost" aria-label="Ghost select" options={options} placeholder="Ghost" />
17  </div>
18)
19}

With Placeholder$

TSX

1import { Select } from "@glinui/ui"
2
3export function SelectPlaceholderDemo() {
4return (
5  <Select
6    aria-label="Placeholder select"
7    options={[{ label: "Option A", value: "a" }, { label: "Option B", value: "b" }]}
8    placeholder="Choose an option..."
9  />
10)
11}

Disabled Option$

TSX

1import { Select } from "@glinui/ui"
2
3export function SelectDisabledOptionDemo() {
4return (
5  <Select
6    aria-label="Status select"
7    options={[
8      { label: "Available", value: "available" },
9      { label: "Unavailable", value: "unavailable", disabled: true },
10      { label: "Also available", value: "also" }
11    ]}
12    placeholder="Select status"
13  />
14)
15}

Disabled Select$

TSX

1import { Select } from "@glinui/ui"
2
3export function SelectDisabledDemo() {
4return (
5  <Select
6    aria-label="Disabled select"
7    disabled
8    options={[{ label: "React", value: "react" }]}
9    placeholder="Disabled select"
10  />
11)
12}

Accessibility$

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.

Reduced Motion$

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	`-`	Auto-generated from TypeScript source.
`placeholder`	`string`	No	`-`	Auto-generated from TypeScript source.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from selectVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "liquid" \| "matte" \| "outline" \| "ghost"`	No	`"default"`	Variant option from selectVariants.

Source$

TSX

1import { Select } from "@glinui/ui"

packages/ui/src/components/select.tsx

packages/ui/src/tests/select.test.tsx

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-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

SelectProps

`SelectProps`

Prop	Type	Required	Default	Description
`options`	`SelectOption[]`	Yes	`-`	-
`placeholder`	`string`	No	`-`	-
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from selectVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "liquid" \| "matte" \| "outline" \| "ghost"`	No	`"default"`	Variant option from selectVariants.