Compact Multi-Select

The Compact Multi-Select component provides a user-friendly way to select multiple items from a dropdown list. It is designed to be compact and is ideal for use in forms and filters where space is limited.

Import

import { CompactMultiSelect } from 'h2o-library';
import type { CompactMultiSelectOption } from 'h2o-library';

Usage

The example below shows a compact multi-select for choosing medical specialties, with a limit on the number of selections.

"use client";

import React, { useState } from "react";
import {
  CompactMultiSelect,
  CompactMultiSelectOption,
} from "h2o-library";

const options: CompactMultiSelectOption[] = [
    { label: "Bariatrics", value: "Bariatrics" },
    { label: "Cardiology", value: "Cardiology" },
    { label: "Dermatology", value: "Dermatology" },
    // ... more options
];

export const CompactMultiSelectExample = () => {
  const [selected, setSelected] = useState<CompactMultiSelectOption[]>([
    options[0],
    options[2],
  ]);

  return (
    <div style={{ width: "400px" }}>
      <CompactMultiSelect
        label="Select specialties"
        options={options}
        selected={selected}
        onChange={setSelected}
        placeholder="Select up to 4"
        maxSelections={4}
      />
    </div>
  );
};

Props

Prop	Type	Required	Description
label	string	No	A label for the select input.
options	CompactMultiSelectOption[]	Yes	An array of options to display in the dropdown.
selected	CompactMultiSelectOption[]	Yes	An array of the currently selected options.
onChange	(selected: CompactMultiSelectOption[]) => void	Yes	Callback function that is called when the selected options change.
placeholder	string	No	Placeholder text to display when no options are selected.
maxSelections	number	No	The maximum number of options that can be selected.

CompactMultiSelectOption Type

Prop	Type	Description
label	string	The text displayed for the option.
value	string	The unique value for the option.

Accessibility

• The component is fully keyboard accessible, allowing users to navigate and select options using the keyboard.
• The selected options are clearly indicated.
• ARIA attributes are used to ensure the component is understandable by screen readers.