# Select
```astro --- --- ``` ## Installation ```bash bunx bejamas add select ``` ```bash npx bejamas add select ``` ```bash pnpm dlx bejamas add select ``` ```bash yarn dlx bejamas add select ``` ## Usage ```astro nocollapse --- --- ``` ## Props | Prop | Type | Default | |---|---|---| | class | `string` | `""` | | name | `string` | | | defaultValue | `string` | | | placeholder | `string` | | | disabled | `boolean` | `false` | | required | `boolean` | `false` | | size | `"sm" \| "default" \| "lg"` | `"default"` | ## Examples ### With Groups
```astro --- --- ``` ### Sizes
```astro --- ---
``` ### Disabled
```astro --- --- ``` ### With Disabled Items
```astro --- --- ``` ### Popper Mode
```astro --- ---
``` ## API Reference ### Events The select emits custom events that you can listen to: | Event | Detail | Description | |-------|--------|-------------| | `select:change` | `{ value: string }` | Fired when a new value is selected | | `select:open-change` | `{ open: boolean }` | Fired when the dropdown opens or closes | 
Waiting for logs...
```astro nocollapse console ``` ### Programmatic Control You can control the select programmatically by dispatching a `select:set` event: ```js nocollapse const select = document.getElementById('my-select'); // Set a specific value select.dispatchEvent(new CustomEvent('select:set', { detail: { value: 'option2' } })); // Open the select dropdown select.dispatchEvent(new CustomEvent('select:set', { detail: { open: true } })); // Close the select dropdown select.dispatchEvent(new CustomEvent('select:set', { detail: { open: false } })); ``` ### Data Attributes The select sets these data attributes that you can use for styling or querying state: | Attribute | Element | Description | |-----------|---------|-------------| | `data-state` | select, select-trigger, select-content | Current state (`open` or `closed`) | | `data-open` / `data-closed` | select, select-trigger, select-content | Presence attributes for style-driven open/close animations | | `data-value` | select | Currently selected value | | `data-selected` | select-item | Present when item is selected | | `data-highlighted` | select-item | Present when item is focused/highlighted | | `data-disabled` | select, select-trigger, select-item | Present when disabled | | `data-placeholder` | select-trigger | Present when showing placeholder (no value selected) | | `data-align-trigger` | select-content | Present when item-aligned positioning is active | | `data-position` | select-content, select-viewport | Positioning mode (`item-aligned` or `popper`) | ### Position Modes The `position` prop on `SelectContent` controls how the dropdown is positioned: - **`item-aligned`** (default): The dropdown aligns with the selected item, similar to native select behavior - **`popper`**: Uses floating UI positioning with configurable placement options on `SelectContent` ```astro nocollapse nopreview ```