Dropdown 10.16.0

ARIA

RTL

An option that's been selected can represent a corresponding value in forms or be used to filter/sort content.

Default

<Dropdown>
  <Dropdown.Trigger>...</Dropdown.Trigger>
  <Dropdown.Options>
    <Dropdown.Option>...</Dropdown.Option>
  </Dropdown.Options>
  <Dropdown.Hint>...</Dropdown.Hint>
</Dropdown>

"use client";

import { useState } from "react";
import { Dropdown, MenuItem } from "@heathmont/moon-core-tw";

type People = {
  name?: string;
};

const people = [
  { name: "Wade Cooper" },
  { name: "Arlene Mccoy" },
  { name: "Devon Webb" },
  { name: "Tom Cook" },
  { name: "Tanya Fox" },
  { name: "Hellen Schmidt" },
];

export const Default = () => {
  const [option, setOption] = useState<People>({ name: "Choose a name..." });

  return (
    <div className="w-56">
      <Dropdown value={option} onChange={setOption}>
        <Dropdown.Trigger className="p-2 cursor-pointer text-bulma hover:text-piccolo border border-beerus rounded-moon-i-sm w-full">
          {option?.name}
        </Dropdown.Trigger>

        <Dropdown.Options>
          {people.map((person, index) => (
            <Dropdown.Option value={person} key={index}>
              {({ selected, active }) => (
                <MenuItem isActive={active} isSelected={selected}>
                  {person.name}
                </MenuItem>
              )}
            </Dropdown.Option>
          ))}
        </Dropdown.Options>
      </Dropdown>
    </div>
  );
};

export default Default;

Trigger elements

For <Dropdown /> you can use multiple different components to trigger it (e.g. <Button />, <MenuItem />).

"use client";

import { useState } from "react";
import { Dropdown, MenuItem, Button } from "@heathmont/moon-core-tw";
import { ControlsChevronDown } from "@heathmont/moon-icons-tw";

const people = [
  { name: "Wade Cooper" },
  { name: "Arlene Mccoy" },
  { name: "Devon Webb" },
  { name: "Tom Cook" },
  { name: "Tanya Fox" },
  { name: "Hellen Schmidt" },
];

export const TriggerElements = () => {
  const [option, setOption] = useState(null);
  const [option2, setOption2] = useState(null);
  const [option3, setOption3] = useState(null);
  return (
    <div className="flex flex-col lg:flex-row align-middle justify-around items-center w-full gap-2">
      {/** ***** Custom trigger element ***** */}
      <Dropdown value={option} onChange={setOption}>
        <Dropdown.Trigger
          aria-label="Dropdown trigger"
          className="w-10 h-10 bg-gohan rounded-moon-i-md flex align-middle justify-center items-center cursor-pointer transition-colors hover:bg-piccolo/20 text-moon-24 text-trunks"
        >
          <ControlsChevronDown />
        </Dropdown.Trigger>
        <Dropdown.Options>
          {people.map((person, index) => (
            <Dropdown.Option value={person} key={index}>
              {({ selected, active }) => (
                <MenuItem isActive={active} isSelected={selected}>
                  {person.name}
                </MenuItem>
              )}
            </Dropdown.Option>
          ))}
        </Dropdown.Options>
      </Dropdown>

      {/** ***** Button ***** */}
      <Dropdown value={option2} onChange={setOption2}>
        <Dropdown.Trigger>
          <Button as="span" role="button">
            Select name
          </Button>
        </Dropdown.Trigger>
        <Dropdown.Options>
          {people.map((person, index) => (
            <Dropdown.Option value={person} key={index}>
              {({ selected, active }) => (
                <MenuItem isActive={active} isSelected={selected}>
                  {person.name}
                </MenuItem>
              )}
            </Dropdown.Option>
          ))}
        </Dropdown.Options>
      </Dropdown>
    </div>
  );
};

export default TriggerElements;

Example layouts for options

Here are some sample dropdown menu layouts you can create. The possibilities are endless; simply choose your preferred menu item option.

"use client";

import { useEffect, useState } from "react";
import { Dropdown, MenuItem, Button } from "@heathmont/moon-core-tw";
import {
  OtherWater,
  OtherLightning,
  OtherMoon,
  OtherSun,
} from "@heathmont/moon-icons-tw";

const options = [
  {
    name: "Option 1",
    icon: <OtherLightning className="text-moon-24 text-bulma" />,
  },
  {
    name: "Option 2",
    icon: <OtherWater className="text-moon-24 text-bulma" />,
  },
  { name: "Option 3", icon: <OtherSun className="text-moon-24 text-bulma" /> },
  { name: "Option 4", icon: <OtherMoon className="text-moon-24 text-bulma" /> },
];

const languages = [
  { name: "Mandarin Chinese" },
  { name: "Spanish" },
  { name: "English" },
  { name: "Hindi" },
  { name: "Bengali" },
  { name: "Portuguese" },
];

const countries = [
  { name: "Australia" },
  { name: "Canada" },
  { name: "China" },
  { name: "Germany" },
  { name: "Hungary" },
  { name: "Japan" },
];

export const OptionsVariants = () => {
  const [option, setOption] = useState(null);
  const [language, setLanguage] = useState(null);
  const [selectedCountry, setSelectedCountry] = useState([
    countries[0],
    countries[3],
  ]);

  useEffect(() => {
    console.log("selected: ", selectedCountry);
  }, [selectedCountry]);

  return (
    <div className="flex flex-col lg:flex-row align-middle justify-around items-center w-full gap-2">
      <Dropdown value={option} onChange={setOption}>
        <Dropdown.Trigger>
          <Button
            as="span"
            role="button"
            className="border border-beerus"
            variant="ghost"
          >
            Sort by
          </Button>
        </Dropdown.Trigger>
        <Dropdown.Options>
          {options.map((opt, index) => (
            <Dropdown.Option value={opt} key={index}>
              {({ selected, active }) => (
                <MenuItem isActive={active} isSelected={selected}>
                  {opt.icon}
                  <MenuItem.Title>{opt.name}</MenuItem.Title>
                </MenuItem>
              )}
            </Dropdown.Option>
          ))}
        </Dropdown.Options>
      </Dropdown>

      <Dropdown value={language} onChange={setLanguage}>
        <Dropdown.Trigger>
          <Button
            as="span"
            role="button"
            className="border border-beerus"
            variant="ghost"
          >
            Select language
          </Button>
        </Dropdown.Trigger>
        <Dropdown.Options>
          {languages.map((opt, index) => (
            <Dropdown.Option value={opt} key={index}>
              {({ selected, active }) => (
                <MenuItem
                  isActive={active}
                  isSelected={selected}
                  data-testid={`test-${index}`}
                >
                  <MenuItem.Title>{opt.name}</MenuItem.Title>
                  <MenuItem.Radio />
                </MenuItem>
              )}
            </Dropdown.Option>
          ))}
        </Dropdown.Options>
      </Dropdown>

      <Dropdown value={selectedCountry} onChange={setSelectedCountry} multiple>
        <Dropdown.Trigger>
          <Button
            as="span"
            role="button"
            className="border border-beerus"
            variant="ghost"
          >
            Select countries
          </Button>
        </Dropdown.Trigger>
        <Dropdown.Options>
          {countries.map((country, index) => (
            <Dropdown.Option value={country} key={index}>
              {({ selected, active }) => (
                <MenuItem isSelected={selected} isActive={active}>
                  <MenuItem.Title> {country.name}</MenuItem.Title>
                  <MenuItem.Checkbox />
                </MenuItem>
              )}
            </Dropdown.Option>
          ))}
        </Dropdown.Options>
      </Dropdown>
    </div>
  );
};

export default OptionsVariants;

Select

A form input used for selecting a value: when collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from.

Moon supports two types of selects, one which opens browser(s) native styling option list and <Dropdown />.

<Dropdown /> component supports various sizes by using the size prop. If not specified, the default size is Medium (md).

To provide informative helper text below the dropdown field, utilize the <Dropdown.Hint /> sub-component.

<Dropdown>
  <Dropdown.Select>...</Dropdown.Select>
  <Dropdown.HiddenInput />
  <Dropdown.Options>
    <Dropdown.Option>...</Dropdown.Option>
  </Dropdown.Options>
  <Dropdown.Hint>...</Dropdown.Hint>
</Dropdown>

Small

Informative message holder

Medium

Informative message holder

Large

Informative message holder

"use client";

import { useState } from "react";
import { Dropdown, MenuItem } from "@heathmont/moon-core-tw";

type People = {
  name: string;
};
const people = [
  { name: "Wade Cooper" },
  { name: "Arlene Mccoy" },
  { name: "Devon Webb" },
  { name: "Tom Cook" },
  { name: "Tanya Fox" },
  { name: "Hellen Schmidt" },
];

export const Select = () => {
  const [option, setOption] = useState<People | null>(null);
  const [option2, setOption2] = useState<People | null>(null);
  const [option3, setOption3] = useState<People | null>(null);
  return (
    <div className="flex flex-col lg:flex-row justify-around items-start w-full gap-2">
      <Dropdown value={option} onChange={setOption} size="sm">
        {({ open }) => (
          <>
            <Dropdown.Select
              open={open}
              label="Small"
              placeholder="Choose an option"
            >
              {option?.name}
            </Dropdown.Select>

            <Dropdown.Options>
              {people.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      <MenuItem.Title>{person.name}</MenuItem.Title>
                      <MenuItem.Radio isSelected={selected} />
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>

      <Dropdown value={option2} onChange={setOption2}>
        {({ open }) => (
          <>
            <Dropdown.Select
              open={open}
              label="Medium"
              placeholder="Choose an option"
            >
              {option2?.name}
            </Dropdown.Select>
            <Dropdown.Options>
              {people.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      <MenuItem.Title>{person.name}</MenuItem.Title>
                      <MenuItem.Radio isSelected={selected} />
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>

      <Dropdown value={option3} onChange={setOption3} size="lg">
        {({ open }) => (
          <>
            <Dropdown.Select
              open={open}
              label="Large"
              placeholder="Choose an option"
            >
              {option3?.name}
            </Dropdown.Select>
            <Dropdown.Options>
              {people.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      <MenuItem.Title>{person.name}</MenuItem.Title>
                      <MenuItem.Radio isSelected={selected} />
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>
    </div>
  );
};

export default Select;

Different states for Select

Set the Disabled and Error states for the <Dropdown /> component using the isDisabled and isError props, respectively.

Error

Informative message holder

Disabled

Informative message holder

"use client";

import { useState } from "react";
import { Dropdown, MenuItem } from "@heathmont/moon-core-tw";
import { GenericInfo } from "@heathmont/moon-icons-tw";

type People = {
  name: string;
};

const people = [
  { name: "Wade Cooper" },
  { name: "Arlene Mccoy" },
  { name: "Devon Webb" },
  { name: "Tom Cook" },
  { name: "Tanya Fox" },
  { name: "Hellen Schmidt" },
];

export const SelectStates = () => {
  const [selected, setSelected] = useState<People>(people[2]);
  const [selected2, setSelected2] = useState<People>(people[0]);
  const [selected3, setSelected3] = useState<People | null>(null);
  const [selected4, setSelected4] = useState<People | null>(null);
  return (
    <div className="flex flex-col lg:flex-row justify-around items-center w-full gap-2">
      <Dropdown value={selected} onChange={setSelected} isError={true}>
        {({ open }) => (
          <>
            <Dropdown.Select open={open} label="Error">
              {selected?.name}
            </Dropdown.Select>

            <Dropdown.Options>
              {people.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      {person.name}
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>
              <GenericInfo />
              Informative message holder
            </Dropdown.Hint>
          </>
        )}
      </Dropdown>

      <Dropdown value={selected2} onChange={setSelected2} disabled={true}>
        {({ open }) => (
          <>
            <Dropdown.Select open={open} label="Disabled">
              {selected2?.name}
            </Dropdown.Select>
            <Dropdown.Options>
              {people.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem isActive={active} isSelected={selected}>
                      {person.name}
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>
    </div>
  );
};

export default SelectStates;

Hidden input for Select

To pass data, use the <Dropdown.HiddenInput /> sub-component.

With hidden input

Informative message holder

"use client";

import { useState } from "react";
import { Dropdown, MenuItem } from "@heathmont/moon-core-tw";

const people2 = [
  "Wade Cooper",
  "Arlene Mccoy",
  "Devon Webb",
  "Tom Cook",
  "Tanya Fox",
  "Hellen Schmidt",
];

export const HiddenInput = () => {
  const [option, setOption] = useState<string | undefined>(undefined);
  return (
    <div className="flex flex-col lg:flex-row justify-around items-end w-80 gap-2">
      <Dropdown value={option} onChange={setOption}>
        {({ open }) => (
          <>
            <Dropdown.Select
              open={open}
              label="With hidden input"
              placeholder="Choose an option"
            >
              {option}
            </Dropdown.Select>
            <Dropdown.HiddenInput name="value" />

            <Dropdown.Options>
              {people2.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      <MenuItem.Title>{person}</MenuItem.Title>
                      <MenuItem.Radio isSelected={selected} />
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>
    </div>
  );
};

export default HiddenInput;

Select with inner label

To add an inner label to your select component, use the <Dropdown.InsetSelect /> sub-component instead of <Dropdown.Select />.

<Dropdown>
  <Dropdown.InsetSelect>...</Dropdown.InsetSelect>
  <Dropdown.HiddenInput />
  <Dropdown.Options>
    <Dropdown.Option>...</Dropdown.Option>
  </Dropdown.Options>
  <Dropdown.Hint>...</Dropdown.Hint>
</Dropdown>

Informative message holder

"use client";

import { useState } from "react";
import { Dropdown, MenuItem } from "@heathmont/moon-core-tw";

type People = {
  name: string;
};
const people = [
  { name: "Wade Cooper" },
  { name: "Arlene Mccoy" },
  { name: "Devon Webb" },
  { name: "Tom Cook" },
  { name: "Tanya Fox" },
  { name: "Hellen Schmidt" },
];

export const InsetSelect = () => {
  const [option, setOption] = useState<People | null>(null);
  return (
    <div className="flex w-full max-w-sm items-center">
      <Dropdown value={option} onChange={setOption}>
        {({ open }) => (
          <>
            <Dropdown.InsetSelect
              open={open}
              label="Select label"
              placeholder="Choose an option"
            >
              {option?.name}
            </Dropdown.InsetSelect>

            <Dropdown.Options>
              {people.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      <MenuItem.Title>{person.name}</MenuItem.Title>
                      <MenuItem.Radio isSelected={selected} />
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>
    </div>
  );
};

export default InsetSelect;

Different states for Select with inner label

Set the Disabled and Error states for the <Dropdown /> component using the isDisabled and isError props, respectively.

Informative message holder

"use client";

import { useState } from "react";
import { Dropdown, MenuItem } from "@heathmont/moon-core-tw";
import { GenericInfo } from "@heathmont/moon-icons-tw";

type People = {
  name: string;
};
const people = [
  { name: "Wade Cooper" },
  { name: "Arlene Mccoy" },
  { name: "Devon Webb" },
  { name: "Tom Cook" },
  { name: "Tanya Fox" },
  { name: "Hellen Schmidt" },
];

export const InsetSelectStates = () => {
  const [selected, setSelected] = useState<People>(people[2]);
  const [selected2, setSelected2] = useState<People>(people[0]);
  const [selected3, setSelected3] = useState<People | null>(null);
  const [selected4, setSelected4] = useState<People | null>(null);
  return (
    <div className="flex flex-col lg:flex-row justify-around items-center w-full gap-2">
      <Dropdown value={selected} onChange={setSelected} isError={true}>
        {({ open }) => (
          <>
            <Dropdown.InsetSelect open={open} label="Error">
              {selected?.name}
            </Dropdown.InsetSelect>

            <Dropdown.Options>
              {people.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      {person.name}
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>
              <GenericInfo />
              Informative message holder
            </Dropdown.Hint>
          </>
        )}
      </Dropdown>

      <Dropdown value={selected2} onChange={setSelected2} disabled={true}>
        {({ open }) => (
          <>
            <Dropdown.InsetSelect open={open} label="Disabled">
              {selected2?.name}
            </Dropdown.InsetSelect>
            <Dropdown.Options>
              {people.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem isActive={active} isSelected={selected}>
                      {person.name}
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>
    </div>
  );
};

export default InsetSelectStates;

MultiSelect

Using the multiple prop with the <Dropdown.MultiSelect /> sub-component allows <Dropdown /> to support multiple option selection.

<Dropdown>
  <Dropdown.MultiSelect>...</Dropdown.MultiSelect>
  <Dropdown.Options>
    <Dropdown.Option>...</Dropdown.Option>
  </Dropdown.Options>
  <Dropdown.Hint>...</Dropdown.Hint>
</Dropdown>

Small

Informative message holder

Medium

Informative message holder

Large

Informative message holder

"use client";

import { useCallback, useState } from "react";
import { Dropdown, MenuItem } from "@heathmont/moon-core-tw";

type People = {
  name: string;
};

const peoples = [
  { name: "Wade Cooper" },
  { name: "Arlene Mccoy" },
  { name: "Devon Webb" },
  { name: "Tom Cook" },
  { name: "Tanya Fox" },
  { name: "Hellen Schmidt" },
];

export const MultiSelect = () => {
  const [selected, setSelected] = useState<People[]>([]);
  const [selected2, setSelected2] = useState<People[]>([]);
  const [selected3, setSelected3] = useState<People[]>([]);

  return (
    <div className="flex flex-col lg:flex-row justify-around items-start w-full gap-2">
      <Dropdown
        value={selected}
        onChange={setSelected}
        onClear={useCallback(() => setSelected([]), [setSelected])}
        size="sm"
        multiple
      >
        {({ open }) => (
          <>
            <Dropdown.MultiSelect
              open={open}
              label="Small"
              placeholder="Choose an option"
              counter={selected.length}
            />
            <Dropdown.Options>
              {peoples.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      <MenuItem.Title>{person.name}</MenuItem.Title>
                      <MenuItem.Checkbox isSelected={selected} />
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>

      <Dropdown
        value={selected2}
        onChange={setSelected2}
        onClear={useCallback(() => setSelected2([]), [setSelected2])}
        multiple
      >
        {({ open }) => (
          <>
            <Dropdown.MultiSelect
              open={open}
              label="Medium"
              placeholder="Choose an option"
              data-test="data-test"
              counter={selected2.length}
            />
            <Dropdown.Options>
              {peoples.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      <MenuItem.Title>{person.name}</MenuItem.Title>
                      <MenuItem.Checkbox isSelected={selected} />
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>

      <Dropdown
        size="lg"
        value={selected3}
        onChange={setSelected3}
        onClear={useCallback(() => setSelected3([]), [setSelected3])}
        multiple
      >
        {({ open }) => (
          <>
            <Dropdown.MultiSelect
              open={open}
              label="Large"
              placeholder="Choose an option"
              counter={selected3.length}
            />
            <Dropdown.Options>
              {peoples.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      <MenuItem.Title>{person.name}</MenuItem.Title>
                      <MenuItem.Checkbox isSelected={selected} />
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>
    </div>
  );
};

export default MultiSelect;

MultiSelect with inner label

Using the multiple prop with the <Dropdown.InsetMultiSelect /> sub-component allows <Dropdown /> to support multiple option selection.

<Dropdown>
  <Dropdown.InsetMultiSelect>...</Dropdown.InsetMultiSelect>
  <Dropdown.Options>
    <Dropdown.Option>...</Dropdown.Option>
  </Dropdown.Options>
  <Dropdown.Hint>...</Dropdown.Hint>
</Dropdown>

Informative message holder

"use client";

import { useCallback, useState } from "react";
import { Dropdown, MenuItem } from "@heathmont/moon-core-tw";

type People = {
  name: string;
};

const people = [
  { name: "Wade Cooper" },
  { name: "Arlene Mccoy" },
  { name: "Devon Webb" },
  { name: "Tom Cook" },
  { name: "Tanya Fox" },
  { name: "Hellen Schmidt" },
];
export const InsetMultiSelect = () => {
  const [selected, setSelected] = useState<People[]>([]);
  return (
    <div className="flex w-full max-w-sm items-center">
      <Dropdown
        value={selected}
        onChange={setSelected}
        onClear={useCallback(() => setSelected([]), [setSelected])}
        multiple
      >
        {({ open }) => (
          <>
            <Dropdown.InsetMultiSelect
              open={open}
              label="Select label"
              placeholder="Choose an option"
              counter={selected.length}
            />
            <Dropdown.Options>
              {people.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      <MenuItem.Title>{person.name}</MenuItem.Title>
                      <MenuItem.Checkbox isSelected={selected} />
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>
    </div>
  );
};

export default InsetMultiSelect;

Custom menu width

To customize the width of the <Dropdown.Options /> container, use the menuWidth prop.

Custom options width

Informative message holder

"use client";

import { useState } from "react";
import { Dropdown, MenuItem } from "@heathmont/moon-core-tw";

type People = {
  name: string;
};
const people = [
  { name: "Wade Cooper" },
  { name: "Arlene Mccoy" },
  { name: "Devon Webb" },
  { name: "Tom Cook" },
  { name: "Tanya Fox" },
  { name: "Hellen Schmidt" },
];

export const CustomMenuWidth = () => {
  const [selected, setSelected] = useState<People | null>(null);

  return (
    <div className="w-56">
      <Dropdown value={selected} onChange={setSelected}>
        {({ open }) => (
          <>
            <Dropdown.Select
              open={open}
              label="Custom options width"
              placeholder="Choose an option"
            >
              {selected?.name}
            </Dropdown.Select>

            <Dropdown.Options menuWidth="w-40">
              {people.map((person, index) => (
                <Dropdown.Option value={person} key={index}>
                  {({ selected, active }) => (
                    <MenuItem
                      isActive={active}
                      isSelected={selected}
                      data-testid={`test-${index}`}
                    >
                      {person.name}
                    </MenuItem>
                  )}
                </Dropdown.Option>
              ))}
            </Dropdown.Options>
            <Dropdown.Hint>Informative message holder</Dropdown.Hint>
          </>
        )}
      </Dropdown>
    </div>
  );
};

export default CustomMenuWidth;

These are props specific to the Dropdown component:

Name	Type	Default
value*	"T"	-
onChange*	(value: T) => void	-
isError	boolean	-
disabled	boolean	-
size	"sm" \| "md" \| "lg" \| "xl" \| string	md
className	string	-
position	enum	bottom
open	boolean	-
multiple	boolean	-

Properties indicated with * are required.

These are props specific to the Dropdown.Options component:

Name	Type	Default
menuWidth	string	-
className	string	-

These are props specific to the Dropdown.Option component:

Name	Type	Default
value	"T"	-
active	boolean	-
selected	boolean	-

These are props specific to the Dropdown.Select / Dropdown.InsetSelect component:

Name	Type	Default
label	"JSX.Element \| string"	-
placeholder	"JSX.Element \| string"	-
className	string	-

These are props specific to the Dropdown.MultiSelect / Dropdown.InsetMultiSelect component:

Name	Type	Default
label	"JSX.Element \| string"	-
placeholder	"JSX.Element \| string"	-
className	string	-
counter	"Number"	0

These are props specific to the Dropdown.HiddenInput component:

Name	Type	Default
name	string	-
className	string	-
value	enum	-