MultiSelect

<MultiSelect
  addEmpty?: boolean
  name?: string
  label?: string
  options?: { value: string; label: string; disabled?: boolean }[]
  isDisabled?: boolean
  isRequired?: boolean
  isSearchable?: boolean
  isClearable?: boolean
  defaultValue?: string[]
  handleSelection?: (values: string[]) => void
  error?: string
  placeholder?: string
> : JSX.Element

• addEmpty: If true, includes an empty option at the top of the options list. Defaults to false.
• name: The name attribute of the hidden input element, used to link the component to form values.
• label: The label displayed for the multi-select input.
• options: An array of objects representing the available options. Each object should have value and label properties, with an optional disabled flag.
• isDisabled: Disables the multi-select input when true. Defaults to false.
• isRequired: Marks the field as required, displaying an asterisk next to the label. Defaults to true.
• isSearchable: Enables a search input to filter options. Defaults to false.
• isClearable: Allows clearing all selected values when true. Defaults to true.
• defaultValue: An array of strings representing the default selected values.
• handleSelection: A callback triggered when the selected options change. Receives the updated list of selected values as a parameter.
• error: A string containing an error message to display below the input.
• placeholder: Placeholder text displayed when no value is selected.

Example

import { MultiSelect } from "@explita/daily-toolset/form";

function App() {
  const [selectedValues, setSelectedValues] = useState<string[]>([]);

  const handleSelection = (values: string[]) => {
    setSelectedValues(values);
  };

  return (
    <div>
      <MultiSelect
        name="fruits"
        label="Select Fruits"
        options={[
          { value: "apple", label: "Apple" },
          { value: "banana", label: "Banana" },
          { value: "cherry", label: "Cherry" },
        ]}
        isSearchable={true}
        defaultValue={["apple"]}
        handleSelection={handleSelection}
        placeholder="Choose your favorite fruits"
        error={selectedValues.length === 0 ? "At least one fruit must be selected." : ""}
      />
    </div>
  );
}

Use Cases

• Creating multi-select inputs with custom validation and state management.
• Adding searchable dropdowns for better usability with large datasets.
• Enabling dynamic selection and deselection of options in forms.
• Handling scenarios requiring multiple options to be selected, such as tagging systems.