Component

Select

A dropdown select component with Neo-Brutalism styling. Built on Radix UI Select primitive.

Preview

Favorite Fruit

Installation

pnpm dlx brutx@latest add select

Usage

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
  SelectSeparator,
} from "@/components/ui/select"

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>

Examples

Multiple Groups with Separators

Organize options into groups with labels and separators.

Controlled Select

Control the select state programmatically with value and onValueChange.

Selected: None

With Disabled Items

Use disabled prop to disable specific options.

Disabled Select

Disable the entire select component.

API Reference

Select

The root component that manages state.

Prop	Type	Default	Description
value	string	-	Controlled value
onValueChange	(value: string) => void	-	Callback when value changes
defaultValue	string	-	Initial value (uncontrolled)
disabled	boolean	false	Disable the select

SelectContent

The dropdown content container.

Prop	Type	Default	Description
position	"popper" \| "item-aligned"	"popper"	Positioning mode for dropdown
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Position relative to trigger

SelectItem

Individual option item.

Prop	Type	Default	Description
value	string	required	Unique value for the option
disabled	boolean	false	Disable this option

All Exports

Component	Description
Select	Root component
SelectTrigger	Button that opens dropdown
SelectValue	Displays selected value
SelectContent	Dropdown container
SelectItem	Individual option
SelectGroup	Group options together
SelectLabel	Label for a group
SelectSeparator	Visual divider between groups
SelectScrollUpButton	Scroll up indicator for long lists
SelectScrollDownButton	Scroll down indicator for long lists

Accessibility

Enter / Space opens dropdown and selects item
↑ ↓ navigate between options
Escape closes the dropdown
Type to search and focus matching options
Full screen reader support