Select

FREE

Select with icons, descriptions, groups, search and multi-select with removable chips.

Playground

Change the props and watch the component and its code update live.

Code

import { Sun, Atom } from "lucide-react";
import { Select } from "@/components/ui/select";

const options = [
  { value: "light", label: "Light", icon: <Sun /> },
  { value: "react", label: "React", icon: <Atom /> },
];

<Select
  searchable
  options={options}
  placeholder="Pick one"
/>

Installation

Terminal

npx @bloxa/cli add select
# or: npx shadcn@latest add @bloxa/select

Packages installed automatically: radix-ui

Examples

Basic

Icons and descriptions

Grouped with search

Multiple

Selections show as removable chips; extras collapse into +N.

ReactTailwind CSS

value: ["react","tailwind"]

API reference

Every component also accepts the props of the element it renders.

Select

Prop	Type	Default	Description
options	SelectOption[]	—	List of { value, label, icon?, description?, group?, disabled? }.
multiple	boolean	false	Multi-select; value becomes string[].
value / defaultValue	string \| string[]	—	Selected value(s).
onValueChange	(value) => void	—	Called when the selection changes.
searchable	boolean	false	Search field that filters options.
clearable	boolean	false	Button that clears the selection.
maxChips	number	3	Chips shown before +N in multi mode.
name	string	—	Hidden input name for form submission.
size	"sm" \| "md" \| "lg"	"md"	Height and text size.
labels	{ search?, empty?, clear?, remove? }	—	UI strings (for translation).