Select Component

A flexible select component with support for single and multiple selection, search, and various preview modes.

Installation

pnpm → pnpm dlx pacmanui add select
npm  → npx pacmanui add select

API Reference

PROP	TYPE	DEFAULT	DESCRIPTION
options	SelectOption[]	required	Array of options to display in the select
value	string \| string[]	undefined	Selected value(s)
onChange	(value: string \| string[]) => void	required	Called when selection changes
placeholder	string	'Select...'	Placeholder text when no option is selected
multiple	boolean	false	Enable multiple selection
searchable	boolean	false	Enable search functionality
preview	'text' \| 'tabs' \| 'badge' \| 'numbers'	'text'	How to display selected options in multiple mode
disabled	boolean	false	Disable the select component
clearable	boolean	false	Show clear button to remove selection

Examples

Default (Single Select)

A basic single-select dropdown

Choose a framework

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

const options = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'angular', label: 'Angular' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'nextjs', label: 'Next.js' },
]

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

Multi Select

Select multiple options at once

Choose frameworks

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

const options = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'angular', label: 'Angular' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'nextjs', label: 'Next.js' },
]

<Select
  options={options}
  multiple
  placeholder="Choose frameworks"
  onChange={(value) => console.log('Selected:', value)}
/>

Searchable

Search through options with a search input

Search and select

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

const options = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'angular', label: 'Angular' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'nextjs', label: 'Next.js' },
]

<Select
  options={options}
  searchable
  multiple
  preview='tabs'
  placeholder="Search and select"
  onChange={(value) => console.log('Selected:', value)}
/>

Preview Options

Different ways to display selected options

Tabs preview

Text preview (default)

Badge preview

Numbers preview

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

const options = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'angular', label: 'Angular' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'nextjs', label: 'Next.js' },
]

<Select options={options} multiple preview="tabs" placeholder="Tabs preview" />
<Select options={options} multiple preview="text" placeholder="Text preview (default)" />
<Select options={options} multiple preview="badge" placeholder="Badge preview" />
<Select options={options} multiple preview="numbers" placeholder="Numbers preview" />