Component reference
MultiSelect
Choose a technology stack with an application-owned limit.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Up to four technologies.
2/4 selectedSelected: react, nextjs
Width adapts to the available space
"use client";
import { useState } from "react";
import { MultiSelect, type PimoluMultiSelectOption } from "@pimolu/react";
const technologies: PimoluMultiSelectOption[] = [
{ value: "react", label: "React", keywords: ["ui"] },
{ value: "nextjs", label: "Next.js", keywords: ["ssr"] },
{ value: "angular", label: "Angular" },
{ value: "vue", label: "Vue", keywords: ["javascript"] },
{ value: "svelte", label: "Svelte", disabled: true },
{ value: "nuxt", label: "Nuxt" },
];
function StackExample() {
const [stack, setStack] = useState<string[]>([
"react",
"nextjs",
]);
return (
<div className="grid gap-5 min-w-0">
<MultiSelect
label="Tech stack"
name="stack"
placeholder="Search technologies…"
helperText="Up to four technologies."
options={technologies}
value={stack}
onValueChange={setStack}
maxSelected={4}
fullWidth
/>
<p className="text-sm text-muted leading-relaxed">
{
stack.length === 0
? "Nothing selected yet."
: `Selected: ${stack.join(", ")}`
}
</p>
</div>
);
}
export function DemoExample() {
return (<StackExample />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
From xs to xxl.
Variants
The semantic tone of the field and its tags.
Appearances
Outline, soft, filled and glass.
Usage
Use stable option values and apply selection limits deliberately; display the resulting state nearby.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluMultiSelectOption
Type source| Name | Type | Default | Description |
|---|---|---|---|
valueRequired | string | — | Public Pimolu prop; see the source declaration for details. |
labelRequired | string | — | Visible label associated with the control. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
keywords | readonly string[] | undefined | — | Public Pimolu prop; see the source declaration for details. |
valueRequiredstringNo default extracted.
Public Pimolu prop; see the source declaration for details.
labelRequiredstringNo default extracted.
Visible label associated with the control.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
keywordsreadonly string[] | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluMultiSelectProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
name | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
form | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
optionsRequired | readonly PimoluMultiSelectOption[] | — | Public Pimolu prop; see the source declaration for details. |
value | readonly string[] | undefined | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | readonly string[] | undefined | [] | Public Pimolu prop; see the source declaration for details. |
onValueChange | ((values: string[]) => void) | undefined | — | Public Pimolu prop; see the source declaration for details. |
onQueryChange | ((query: string) => void) | undefined | — | Public Pimolu prop; see the source declaration for details. |
maxSelected | number | undefined | — | Public Pimolu prop; see the source declaration for details. |
clearable | boolean | undefined | true | Public Pimolu prop; see the source declaration for details. |
label | string | undefined | — | Visible label associated with the control. |
placeholder | string | undefined | "Search..." | Public Pimolu prop; see the source declaration for details. |
helperText | string | undefined | — | Supporting text below the field. |
errorMessage | string | undefined | — | Error feedback replacing helper text and marking the field invalid. |
emptyMessage | string | undefined | "No results found." | Public Pimolu prop; see the source declaration for details. |
requiredMessage | string | undefined | "Select at least one option." | Public Pimolu prop; see the source declaration for details. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined | "md" | Component size. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "neutral" | Variant exposed by this component. |
appearance | "soft" | "outline" | "glass" | "filled" | undefined | "outline" | Visual treatment of the control or surface. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
required | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
invalid | boolean | undefined | false | Explicit invalid state. |
fullWidth | boolean | undefined | false | Use the available width of the parent. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
inputClassName | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
style | CSSProperties | undefined | — | Public Pimolu prop; see the source declaration for details. |
aria-label | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
aria-labelledby | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
aria-describedby | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
idstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
namestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
formstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
optionsRequiredreadonly PimoluMultiSelectOption[]No default extracted.
Public Pimolu prop; see the source declaration for details.
valuereadonly string[] | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuereadonly string[] | undefinedDefault: []
Public Pimolu prop; see the source declaration for details.
onValueChange((values: string[]) => void) | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
onQueryChange((query: string) => void) | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
maxSelectednumber | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
clearableboolean | undefinedDefault: true
Public Pimolu prop; see the source declaration for details.
labelstring | undefinedNo default extracted.
Visible label associated with the control.
placeholderstring | undefinedDefault: "Search..."
Public Pimolu prop; see the source declaration for details.
helperTextstring | undefinedNo default extracted.
Supporting text below the field.
errorMessagestring | undefinedNo default extracted.
Error feedback replacing helper text and marking the field invalid.
emptyMessagestring | undefinedDefault: "No results found."
Public Pimolu prop; see the source declaration for details.
requiredMessagestring | undefinedDefault: "Select at least one option."
Public Pimolu prop; see the source declaration for details.
size"xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefinedDefault: "md"
Component size.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "neutral"
Variant exposed by this component.
appearance"soft" | "outline" | "glass" | "filled" | undefinedDefault: "outline"
Visual treatment of the control or surface.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
requiredboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
invalidboolean | undefinedDefault: false
Explicit invalid state.
fullWidthboolean | undefinedDefault: false
Use the available width of the parent.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
inputClassNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
styleCSSProperties | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
aria-labelstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
aria-labelledbystring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
aria-describedbystring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
Accessibility
- Name the field and check chip removal, clear-all, listbox navigation and disabled choices.