components
InputMultiselect
InputMultiselect allows users to select multiple values from a dropdown list. Selected items appear as lozenges inside the input field and can be removed individually. The component supports search filtering and can truncate visible selections after a configurable count. Pass options as children (typically MenuItem elements or option elements). Use the value prop (string array) for controlled selection and onChange for updates.
Import
import { InputMultiselect } from "@skedulo/breeze-ui-react";Usage Guidance
When to use
- +Select multiple values from a list.
- +Tagging or categorization interfaces.
- +Filter controls with multiple active selections.
When not to use
- −For single selection — use InputSelect.
- −For 2-3 options — use InputCheckbox group.
Examples
Code Samples
Basic InputMultiselect
A multiselect field with searchable options for selecting job skills.
import { InputMultiselect } from "@skedulo/breeze-ui-react";
export default function BasicMultiselect() {
return (
<InputMultiselect label="Skills" placeholder="Select skills...">
<option value="plumbing">Plumbing</option>
<option value="electrical">Electrical</option>
<option value="hvac">HVAC</option>
<option value="solar">Solar Installation</option>
</InputMultiselect>
);
}Guidelines
Do
- ✓Use canSearch for long option lists.
- ✓Use truncateValuesAfter to keep the field compact.
Don't
- ✗Don't use without a label.
- ✗Don't use for mutually exclusive choices.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string[] | — | Array of currently selected values. |
| onChange | (e: MultiSelectChangeEvent) => void | — | Fires when the selection changes. |
| label | ReactNode | — | Field label. |
| error | ReactNode | — | Error message below the input. |
| placeholder | string | — | Placeholder text when no items are selected. |
| canSearch | boolean | true | Enables typing to filter the option list. |
| truncateValuesAfter | number | — | Number of selected items to show before truncating with a count badge. |
| disabled | boolean | false | Disables the input. |
| invalid | boolean | false | Applies error styling. |
| required | boolean | false | Marks the field as required. |