InsetNativeSelect 10.16.0

ARIA
RTL

A form input utilized to select a value: when collapsed, it displays the presently chosen option, and when expanded, it reveals a scrollable list using native select of browser for the user to make a selection.

When in a collapsed state, it displays the presently selected option, and upon expansion, it presents a scrollable list of predefined choices for the user to select from. Moon.io offers two types of selects: one that opens the browser's native styling option list and a Dropdown.

Default

"use client";

import { InsetNativeSelect } from "@heathmont/moon-core-tw";

const Default = () => (
  <InsetNativeSelect label="Country / Region" data-testid="select">
    <option value="Italy">Italy</option>
    <option value="Spain">Spain</option>
    <option value="China">China</option>
    <option value="Germany">Germany</option>
  </InsetNativeSelect>
);

export default Default;

    Display different States

    You can display various states of the select to signify its current status, including disabled, error, and readOnly (to indicate an already selected option that cannot be modified).

    "use client";

import { InsetNativeSelect, Hint } from "@heathmont/moon-core-tw";
import { GenericInfo } from "@heathmont/moon-icons-tw";

const DifferentStates = () => (
  <div className="flex flex-col lg:flex-row justify-around items-end w-full gap-2">
    <div className="w-full">
      <InsetNativeSelect
        label="Disabled"
        id="dis-1"
        data-testid="dis-1"
        disabled
      >
        <option value="Italy">Italy</option>
        <option value="Spain">Spain</option>
        <option value="China">China</option>
        <option value="Germany">Germany</option>
      </InsetNativeSelect>
      <Hint disabled>Informative message holder</Hint>
    </div>
    <div className="w-full">
      <InsetNativeSelect label="Error" id="err-1" data-testid="err-1" error>
        <option value="Italy">Italy</option>
        <option value="Spain">Spain</option>
        <option value="China">China</option>
        <option value="Germany">Germany</option>
      </InsetNativeSelect>
      <Hint error>
        <GenericInfo />
        Informative message holder
      </Hint>
    </div>
    <div className="w-full">
      <InsetNativeSelect
        label="Read only"
        id="ro-1"
        data-testid="ro-1"
        readOnly
      >
        <option value="Italy">Italy</option>
        <option value="Spain">Spain</option>
        <option value="China">China</option>
        <option value="Germany">Germany</option>
      </InsetNativeSelect>
      <Hint>Informative message holder</Hint>
    </div>
  </div>
);

export default DifferentStates;

      Customization

      "use client";

import { InsetNativeSelect, Hint } from "@heathmont/moon-core-tw";

const CustomStyles = () => (
  <div className="flex flex-col lg:flex-row justify-around items-end w-full gap-2">
    <div className="w-full">
      <InsetNativeSelect
        label="Country / Region"
        id="c-1"
        className="[&_select]:bg-frieza-10 [&_select]:text-piccolo [&_svg]:text-piccolo"
        data-testid="select"
      >
        <option value="Italy">Italy</option>
        <option value="Spain">Spain</option>
        <option value="China">China</option>
        <option value="Germany">Germany</option>
      </InsetNativeSelect>
      <Hint className="text-piccolo">Informative message holder</Hint>
    </div>
  </div>
);

export default CustomStyles;

        InsetNativeSelect

        These are props specific to the InsetNativeSelect component:

        Name
        Type
        Default
        error
        		booleanfalse
        disabled
        		booleanfalse
        className
        		string-