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

Usage

import { Select } from "@/components/bearnie/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>

Grouped options

<Select placeholder="Select a domain" class="w-[240px]">
  <SelectGroup label="Products">
    <option value="lexingtonthemes.com">lexingtonthemes.com</option>
    <option value="oxbowui.com">oxbowui.com</option>
  </SelectGroup>
  <SelectGroup label="Tools">
    <option value="colorsandfonts.com">colorsandfonts.com</option>
    <option value="bearnie.dev">bearnie.dev</option>
  </SelectGroup>
</Select>

Anatomy

Select - The dropdown container with native options
SelectGroup - Native optgroup wrapper for related 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