Hudoro Multi Select

Hudoro Multi Select is a strict and customizable Multi Select component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/multi-select

Instal package using yarn

  yarn add @hudoro/multi-select

Instal package using npm

  npm i @hudoro/multi-select

Usage/Examples (you can combine using icon package hudoro)

import React from "react";
import {MultiSelect} from "@hudoro/multi-select";
import ReactDOM from "react-dom/client";

const App = () => (
  <div>
    <h1>Component test</h1>
    <div style={{margin: "50px", width: "350px"}}>
      <MultiSelect
        sizes="md"
        listSelect={[
          {label: "Indonesia", value: "Indonesia"},
          {label: "Malaysia", value: "Malaysia"},
          {label: "Kamboja", value: "Kamboja"},
          {label: "Thailand", value: "Thailand"},
          {label: "Philipina", value: "Philipina"},
        ]}
        onChange={(e) => console.log("e", e)}
      />
    </div>
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/multi-select

Props that you can pass to <MultiSelect {...props} />

| Prop Name | Value | required | | :--------- | :------------------------------------------------ | :------- | | size | "sm" / "md" / "lg" | false | | listSelect | {label: string; value: string}[] | true | | onChange | (props: {label: string; value: string}[]) => void | true |