Select

<Select placeholder="Select a framework">
<option value="astro">Astro</option>
<option value="next">Next.js</option>
<option value="remix">Remix</option>
</Select>

Installation

npx bearnie add select

import Select from "@/components/ui/select/Select.astro";
import SelectOption from "@/components/ui/select/SelectOption.astro";

Usage

import { Select } from "@/components/ui/select"

<Select placeholder="Select an option">
<option value="one">Option One</option>
<option value="two">Option Two</option>
</Select>

Examples

With label

Framework

<div class="grid gap-2 w-[200px]">
<Label for="framework">Framework</Label>
<Select id="framework" placeholder="Select a framework">
  <option value="astro">Astro</option>
  <option value="next">Next.js</option>
  <option value="remix">Remix</option>
</Select>
</div>

Disabled

<Select disabled placeholder="Disabled">
<option value="one">Option One</option>
</Select>

Anatomy

Select - The dropdown container with native options

Props

Prop	Type	Default	Description
id	string	-	Element ID for label association
name	string	-	Form field name
placeholder	string	-	Placeholder option text
disabled	boolean	false	Disables the select
required	boolean	false	Makes selection required
class	string	-	Additional CSS classes