Koori UI
Components

GlassSelect

A glassmorphism-styled select dropdown powered by Radix UI, composed of multiple sub-components.

Preview

Usage

import {
  GlassSelect,
  GlassSelectTrigger,
  GlassSelectValue,
  GlassSelectContent,
  GlassSelectItem,
} from "koori-ui";
 
<GlassSelect>
  <GlassSelectTrigger>
    <GlassSelectValue placeholder="Select a framework..." />
  </GlassSelectTrigger>
  <GlassSelectContent>
    <GlassSelectItem value="react">React</GlassSelectItem>
    <GlassSelectItem value="vue">Vue</GlassSelectItem>
    <GlassSelectItem value="svelte">Svelte</GlassSelectItem>
  </GlassSelectContent>
</GlassSelect>

With Groups and Labels

import {
  GlassSelect, GlassSelectTrigger, GlassSelectValue,
  GlassSelectContent, GlassSelectGroup, GlassSelectLabel, GlassSelectItem,
} from "koori-ui";
 
<GlassSelect>
  <GlassSelectTrigger>
    <GlassSelectValue placeholder="Pick one..." />
  </GlassSelectTrigger>
  <GlassSelectContent>
    <GlassSelectGroup>
      <GlassSelectLabel>Frontend</GlassSelectLabel>
      <GlassSelectItem value="react">React</GlassSelectItem>
      <GlassSelectItem value="vue">Vue</GlassSelectItem>
    </GlassSelectGroup>
    <GlassSelectGroup>
      <GlassSelectLabel>Backend</GlassSelectLabel>
      <GlassSelectItem value="node">Node.js</GlassSelectItem>
      <GlassSelectItem value="go">Go</GlassSelectItem>
    </GlassSelectGroup>
  </GlassSelectContent>
</GlassSelect>

Props — GlassSelect

PropTypeDefaultDescription
valuestring—Controlled selected value
defaultValuestring—Initial value (uncontrolled)
onValueChange(value: string) => void—Callback on selection change
disabledbooleanfalseDisables the select

Props — GlassSelectContent

PropTypeDefaultDescription
position"popper" | "item-aligned""popper"Positioning strategy

Props — GlassSelectItem

PropTypeDefaultDescription
valuestring—The value of this option (required)
disabledbooleanfalseDisables this item

Previous

GlassRadioGroup

Next

GlassSlider

On this page