Component

Select

A typed select component for single choice, multi-select, filtering, clearable controls, and selection previews.

Examples

Live previews paired with copyable source.

Single Select

A compact dropdown for choosing one option.

Choose a framework

tsx

<Select
  options={options}
  placeholder="Choose a framework"
  onChange={(value) => console.log(value)}
/>

Searchable Multi Select

Filter options and display selected values as tabs.

Search frameworks

tsx

<Select
  options={options}
  multiple
  searchable
  preview="tabs"
  placeholder="Search frameworks"
/>

Preview Modes

Use the preview prop to change how multiple selections are summarized.

Text preview

Badge preview

Numbers preview

Clearable

tsx

<Select options={options} multiple preview="text" placeholder="Text preview" />
<Select options={options} multiple preview="badge" placeholder="Badge preview" />
<Select options={options} multiple preview="numbers" placeholder="Numbers preview" />
<Select options={options} multiple clearable placeholder="Clearable" />

API Reference

Props available on the component.

Prop	Type	Default	Description
options	Option[]	required	Array of options with value and label fields.
onChange	(value: string \| string[]) => void	undefined	Called when the selected value changes.
placeholder	string	'Select...'	Text shown when nothing is selected.
multiple	boolean	false	Allows more than one option to be selected.
searchable	boolean	false	Adds an input for filtering the option list.
preview	'tabs' \| 'text' \| 'badge' \| 'numbers'	'text'	Controls how selected values are displayed.
clearable	boolean	false	Shows a control for clearing the current selection.
disabled	boolean	false	Prevents the select from opening or changing.

Install

bash

pnpm dlx pacmanui add select
npx pacmanui add select

Basic Usage

tsx

import { Select } from '@/components/pacmanui/select'

const options = [{ value: 'react', label: 'React' }]

export default function Example() {
  return <Select options={options} placeholder="Choose one" />
}