Component reference
Combobox
Search and choose an assignee from named options.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Combobox, type PimoluComboboxOption } from "@pimolu/react";
const members: PimoluComboboxOption[] = [
{
value: "amelie",
label: "Amélie Bernard",
keywords: ["design", "tokens"],
},
{
value: "lucas",
label: "Lucas Moreau",
keywords: ["frontend"],
},
{
value: "sofia",
label: "Sofia Rossi",
keywords: ["design engineer"],
},
];
function AssigneeExample() {
const [assignee, setAssignee] = useState("amelie");
return (
<Combobox
label="Assignee"
name="assignee"
placeholder="Search a teammate…"
options={members}
value={assignee}
onValueChange={setAssignee}
clearable
fullWidth
/>
);
}
export function DemoExample() {
return (<AssigneeExample />);
}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.
Appearances
Outline, soft, filled and glass.
Usage
Keep option values stable when labels change; filter according to the component's supported contract.
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.
PimoluComboboxOption
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.
PimoluComboboxProps
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 PimoluComboboxOption[] | — | Public Pimolu prop; see the source declaration for details. |
value | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | undefined | "" | Public Pimolu prop; see the source declaration for details. |
onValueChange | ((value: 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. |
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 | "Please select an 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. |
clearable | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
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 PimoluComboboxOption[]No default extracted.
Public Pimolu prop; see the source declaration for details.
valuestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | undefinedDefault: ""
Public Pimolu prop; see the source declaration for details.
onValueChange((value: 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.
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: "Please select an 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.
clearableboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
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 input and test arrows, Enter, Escape and an empty search result.