Multi Select
The Multi Select component allows users to choose multiple values from a dropdown list.
Basic Usage
Select items...
React
Vue
import { MultiSel } from "@paramanu/forms-react"
export default function App() { return ( <MultiSel placeholder="Select items..."> <div role="option">React</div> <div role="option">Vue</div> </MultiSel> )}<div class="pm-multi-sel pm-multi-sel--outline pm-multi-sel--md"> <div class="pm-multi-sel__trigger" role="combobox" aria-expanded="false" aria-haspopup="listbox" tabindex="0">Select items...</div> <div class="pm-multi-sel__listbox" role="listbox" aria-multiselectable="true"> <div role="option">React</div> <div role="option">Vue</div> </div></div>Accessibility
| Feature | Detail |
|---|---|
aria-multiselectable | Listbox supports multiple selection |
role="combobox" | Trigger role |
| Keyboard | Space/Enter toggles selection |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "outline" | "filled" | "unstyled" | "outline" | Visual variant |
size | "xs" | "sm" | "md" | "lg" | "md" | Size |
invalid | boolean | false | Invalid state |
disabled | boolean | false | Disabled state |
open | boolean | false | Open state |
fullWidth | boolean | false | Full-width layout |
CSS Classes
| Class | Description |
|---|---|
pm-multi-sel | Base class |
pm-multi-sel__trigger | Trigger element |
pm-multi-sel__listbox | Options container |