Heimerle + Meule Logo
Heimerle + Meule

MultiSelect

MultiSelect allows users to select multiple options from a predefined list.

Quick Start

Use a MultiSelect when users need to choose one or more options from a list.

1import { MultiSelect } from "@ecos/ui";
2
3const [value, setValue] = useState<string[]>([]);
4
5<MultiSelect
6  label="Technologies"
7  options={[
8    { value: "react", label: "React" },
9    { value: "nextjs", label: "Next.js" },
10    { value: "typescript", label: "TypeScript" },
11  ]}
12  value={value}
13  onChange={setValue}
14/>

Variants

Variants provide different visual treatments for the component.

Outlined

Filled

Custom

1<MultiSelect
2  label="Technologies"
3  variant="outlined"
4  ...
5/>
6
7<MultiSelect
8  label="Technologies"
9  variant="filled"
10  ...
11/>
12
13<MultiSelect
14  label="Technologies"
15  variant="custom"
16  ...
17/>

Floating Labels

Labels automatically float when the component receives focus or contains one or more selections.

1<MultiSelect
2  label="Technologies"
3  options={[
4    { value: "react", label: "React" },
5    { value: "typescript", label: "TypeScript" },
6  ]}
7  value={["react"]}
8/>

Placeholders

Placeholders provide guidance before any values have been selected.

Skills

Frameworks

Languages

1<MultiSelect
2  label="Skills"
3  placeholder="Select skills"
4  ...
5/>
6
7<MultiSelect
8  label="Frameworks"
9  placeholder="Choose frameworks"
10  ...
11/>
12
13<MultiSelect
14  label="Languages"
15  placeholder="Select languages"
16  ...
17/>

Help Text

Use help text to provide additional context or instructions.

Select all technologies that apply.

1<MultiSelect
2  label="Technologies"
3  helpText="Select all technologies that apply."
4  options={options}
5  value={value}
6  onChange={setValue}
7/>

Required Fields

Use the required prop to indicate a mandatory selection.

1<MultiSelect
2  label="Departments"
3  required
4  options={options}
5  value={value}
6  onChange={setValue}
7/>

MultiSelect States

Use the state prop to communicate validation feedback.

Please select at least one technology.

TypeScript
Tailwind CSS

Technologies selected successfully.

1<MultiSelect
2  label="Technologies"
3  state="default"
4  options={options}
5  value={value}
6  onChange={setValue}
7/>
8
9<MultiSelect
10  label="Technologies"
11  state="error"
12  helpText="Please select at least one technology."
13  options={options}
14  value={value}
15  onChange={setValue}
16/>
17
18<MultiSelect
19  label="Technologies"
20  state="success"
21  helpText="Technologies selected successfully."
22  options={options}
23  value={["react"]}
24  onChange={setValue}
25/>

Disabled State

Disable the component when interaction is unavailable.

1<MultiSelect
2  label="Technologies"
3  disabled
4  value={["react"]}
5  options={options}
6  onChange={setValue}
7/>

Controlled Usage

Manage selected values externally using React state.

1const [value, setValue] = useState<string[]>([]);
2
3<MultiSelect
4  label="Technologies"
5  options={[
6    { value: "react", label: "React" },
7    { value: "nextjs", label: "Next.js" },
8    { value: "typescript", label: "TypeScript" },
9  ]}
10  value={value}
11  onChange={setValue}
12/>

API Reference

Property

Type

Default

Description

labelstring-Floating label displayed for the component.
placeholderstring-Placeholder text displayed when no selections exist.
helpTextstring-Supporting text displayed beneath the component.
variant"outlined" | "filled" | "custom""outlined"Controls the visual appearance of the component.
state"default" | "error" | "success""default"Displays validation and status styling.
requiredbooleanfalseMarks the field as required.
disabledbooleanfalsePrevents user interaction.
optionsMultiSelectOption[]-Available options displayed within the dropdown.
valuestring[]-The controlled selected values.
onChange(value: string[]) => void-Callback fired when the selected values change.
classNamestring-Additional classes applied to the component container.

Visual Reference

Configuration

Preview

Outlined
Filled
Custom
Required
Error

Please select at least one technology.

Success

Technologies selected successfully.

Disabled