Select

A fully customizable select component for Astro projects, built with composable primitives and minimal JavaScript. Supports grouped options, icons, keyboard navigation, and accessible semantics by default. Designed to be flexible, themeable, and production-ready.

Install

pnpm dlx hybrid-astro-ui@latest add select

npx hybrid-astro-ui@latest add select

yarn dlx hybrid-astro-ui@latest add select

bunx hybrid-astro-ui@latest add select

Usage

---
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectOption,
  SelectTrigger,
} from "@/src/components/hybrid-astro-ui/select";

---
<Select class="w-60">
    <SelectTrigger> Choose your destination </SelectTrigger>
    <SelectContent>
        <SelectGroup>
            <SelectLabel> Favorite places </SelectLabel>
            <SelectOption value="home"> Home </SelectOption>
            <SelectOption value="office"> Office </SelectOption>
            <SelectOption value="beach"> Beach </SelectOption>
            <SelectOption value="mountains"> Mountains </SelectOption>
        </SelectGroup>
        <SelectGroup class="border-t">
            <SelectLabel> Recent trips </SelectLabel>
            <SelectOption value="paris"> Paris </SelectOption>
            <SelectOption value="new-york"> New York </SelectOption>
            <SelectOption value="tokyo"> Tokyo </SelectOption>
            <SelectOption value="london"> London </SelectOption>
          </SelectGroup>
    </SelectContent>
</Select>

Props:

• class?: string — Additional CSS classes
• id?: string — Unique identifier for the select element

SelectTrigger

The button element that opens/closes the dropdown menu. This is what users click to interact with the select.

Props:

• class?: string — Additional CSS classes

SelectContent

The container for the dropdown menu items. It handles positioning, scrolling, and visibility of the options list.

Props:

• class?: string — Additional CSS classes

Features:

• Custom scrollbar styling
• Smooth opacity transitions
• Absolute positioning below the trigger
• Maximum height with overflow scrolling

SelectGroup

Groups related options together with optional visual separation. Useful for organizing options into categories.

Props:

• class?: string — Additional CSS classes

Features:

• Grid layout for organizing options
• Vertical spacing between items
• Can be styled with borders for separation

SelectLabel

Provides a label/heading for a group of options. Helps users understand the context of grouped items.

Props:

• class?: string — Additional CSS classes

Features:

• Smaller text size with reduced opacity
• Positioned above options in a group
• Non-interactive text element

SelectOption

Represents an individual selectable option in the dropdown. Each option has a value and can contain custom content.

Props:

• class?: string — Additional CSS classes
• value: string | number | boolean | null | undefined — The value returned when this option is selected

Features:

• Hover state styling
• Visual indicator (dot) for selected state
• Supports icons and custom content
• Click to select functionality

Accessing Current Select Value

Using getElementById and getAttribute

// Get the select element by its ID
const selectElement = document.getElementById('my-select');

// Get the current selected value
const currentValue = selectElement.getAttribute('value');

console.log('Current selected value:', currentValue);

Complete Example

---
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectOption,
  SelectTrigger,
} from "@/src/components/hybrid-astro-ui/select";
---

<!-- Select with an ID -->
<Select id="my-select" class="w-60">
  <SelectTrigger>Choose your destination</SelectTrigger>
  
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Favorite places</SelectLabel>
      <SelectOption value="home">Home</SelectOption>
      <SelectOption value="office">Office</SelectOption>
      <SelectOption value="beach">Beach</SelectOption>
    </SelectGroup>
  </SelectContent>
</Select>

<!-- Button to get current value -->
<button onclick="getCurrentValue()">Get Current Value</button>

<script>
  function getCurrentValue() {
    const selectElement = document.getElementById('my-select');
    const currentValue = selectElement.getAttribute('value');
    
    // Handle case where no value is selected yet
    if (currentValue === null) {
      console.log('No value selected yet');
      alert('Please select an option first');
    } else {
      console.log('Current selected value:', currentValue);
      alert(`Selected value: ${currentValue}`);
    }
  }
</script>