Primitive / Atomstable

Select

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

@glinui/uiComponent: select

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add select

Usage

Basic

TSX

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

Sizes

TSX

1import { Select } from "@glinui/ui"
2
3const opts = [{ value: "a", label: "Alpha" }, { value: "b", label: "Beta" }]
4
5export function Demo() {
6  return (
7    <div className="space-y-3 max-w-xs">
8      <Select size="sm" options={opts} placeholder="Small" />
9      <Select size="md" options={opts} placeholder="Medium" />
10      <Select size="lg" options={opts} placeholder="Large" />
11    </div>
12  )
13}

Variants

TSX

1import { Select } from "@glinui/ui"
2
3const opts = [{ value: "a", label: "Alpha" }, { value: "b", label: "Beta" }]
4
5export function Demo() {
6  return (
7    <div className="space-y-3 max-w-xs">
8      <Select variant="glass" options={opts} placeholder="Glass" />
9      <Select variant="liquid" options={opts} placeholder="Liquid" />
10      <Select variant="matte" options={opts} placeholder="Matte" />
11    </div>
12  )
13}

Accessibility

Native `select` semantics with keyboard navigation.
Pair with `<label>` or `aria-label`.

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.

API Reference

Prop	Type	Required	Default	Description
`options`	`SelectOption[]`	Yes	`-`	Array of { label, value, disabled? }.
`placeholder`	`string`	No	`-`	Disabled placeholder option text.
`variant`	`"default" \| "glass" \| "frosted" \| "liquid" \| "matte" \| "outline" \| "ghost"`	No	`default`	Visual treatment.
`size`	`"sm" \| "md" \| "lg"`	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-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.