Select

Select a fruit

---
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@bejamas/ui/components/select';
---

<Select defaultValue="apple" class="w-[200px]">
  <SelectTrigger>
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="cherry">Cherry</SelectItem>
  </SelectContent>
</Select>

View CodeHide Code

Installation

bun

bunx bejamas add select

npm

npx bejamas add select

pnpm

pnpm dlx bejamas add select

yarn

yarn dlx bejamas add select

Usage

---
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
  SelectSeparator
} from '@bejamas/ui/components/select';
---

<Select name="fruit" defaultValue="apple">
  <SelectTrigger>
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>

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

Select food

---
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@bejamas/ui/components/select';
---

<Select class="w-[200px]">
  <SelectTrigger>
    <SelectValue placeholder="Select food" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Vegetables</SelectLabel>
      <SelectItem value="carrot">Carrot</SelectItem>
      <SelectItem value="broccoli">Broccoli</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

View CodeHide Code

Sizes

Small (h-8)

Default (h-9)

Large (h-10)

---
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@bejamas/ui/components/select';
---

<div class="flex flex-col items-start gap-4 sm:flex-row" >
  <Select class="w-[180px]" size="sm">
    <SelectTrigger>
      <SelectValue placeholder="Small (h-8)" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="cherry">Cherry</SelectItem>
    </SelectContent>
  </Select>
  <Select class="w-[180px]" size="default">
    <SelectTrigger>
      <SelectValue placeholder="Default (h-9)" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="cherry">Cherry</SelectItem>
    </SelectContent>
  </Select>
  <Select class="w-[180px]" size="lg">
    <SelectTrigger size="lg">
      <SelectValue placeholder="Large (h-10)" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="cherry">Cherry</SelectItem>
    </SelectContent>
  </Select>
</div>

View CodeHide Code

Disabled

Disabled

---
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@bejamas/ui/components/select';
---

<Select disabled class="w-[200px]">
  <SelectTrigger>
    <SelectValue placeholder="Disabled" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="cherry">Cherry</SelectItem>
  </SelectContent>
</Select>

View CodeHide Code

With Disabled Items

Choose...

---
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@bejamas/ui/components/select';
---

<Select class="w-[200px]" placeholder="Choose...">
  <SelectTrigger>
    <SelectValue placeholder="Choose..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="available">Available</SelectItem>
    <SelectItem value="unavailable" disabled>Unavailable</SelectItem>
    <SelectItem value="another">Another option</SelectItem>
  </SelectContent>
</Select>

View CodeHide Code

Popper Mode

Bottom

Top

---
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@bejamas/ui/components/select';
---

<div class="flex flex-wrap items-start gap-4">
  <Select class="w-[160px]">
    <SelectTrigger>
      <SelectValue placeholder="Bottom" />
    </SelectTrigger>
    <SelectContent position="popper" side="bottom">
      <SelectItem value="option1">Option 1</SelectItem>
      <SelectItem value="option2">Option 2</SelectItem>
      <SelectItem value="option3">Option 3</SelectItem>
    </SelectContent>
  </Select>
  <Select class="w-[160px]">
    <SelectTrigger>
      <SelectValue placeholder="Top" />
    </SelectTrigger>
    <SelectContent position="popper" side="top">
      <SelectItem value="option1">Option 1</SelectItem>
      <SelectItem value="option2">Option 2</SelectItem>
      <SelectItem value="option3">Option 3</SelectItem>
    </SelectContent>
  </Select>
</div>

View CodeHide Code

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

Choose...

Waiting for logs…

<Select id="my-select">
  <SelectTrigger>
    <SelectValue placeholder="Choose..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>

<script>
  const select = document.getElementById('my-select');

  select.addEventListener('select:change', (e) => {
    console.log('Selected value:', e.detail.value);
  });

  select.addEventListener('select:open-change', (e) => {
    console.log('Is open:', e.detail.open);
  });
</script>

Programmatic Control

You can control the select programmatically by dispatching a select:set event:

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-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)

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

<!-- Item-aligned (default) -->
<Select>
  <SelectContent>...</SelectContent>
</Select>

<!-- Popper mode -->
<Select>
  <SelectContent position="popper">...</SelectContent>
</Select>

<!-- Custom positioning on content -->
<Select>
  <SelectContent position="popper" side="bottom" align="start" sideOffset={8}>
    ...
  </SelectContent>
</Select>