NativeSelect 10.18.1

ARIA
RTL

A form input designed for value selection: in its collapsed state, it reveals the presently chosen option, and upon expansion, it presents a scrollable list of predetermined choices for the user's selection.

In a collapsed state, it reveals the currently selected option, and upon expansion, it displays a scrollable list of predefined choices for the user's selection.

Moon.io supports two types of selects: one that opens the browser's native styling option list and a Dropdown.

Default

"use client";

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

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

export default Default;

    Sizes

    The component <NativeSelect /> supports various sizes using the size prop, allowing seamless integration with your custom layout.

    "use client";

import { NativeSelect, Label } from "@heathmont/moon-core-tw";

const Sizes = () => (
  <div className="flex flex-col lg:flex-row justify-around items-end w-full gap-2">
    <div className="w-full">
      <Label htmlFor="test-1" size="sm">
        Small (sm)
      </Label>
      <NativeSelect id="test-1" size="sm" data-testid="select-sm">
        <option value="Italy">Italy</option>
        <option value="Spain">Spain</option>
        <option value="China">China</option>
        <option value="Germany">Germany</option>
      </NativeSelect>
    </div>
    <div className="w-full">
      <Label htmlFor="test-2">Medium (Default: md)</Label>
      <NativeSelect id="test-2" data-testid="select-md">
        <option value="Italy">Italy</option>
        <option value="Spain">Spain</option>
        <option value="China">China</option>
        <option value="Germany">Germany</option>
      </NativeSelect>
    </div>
    <div className="w-full">
      <Label htmlFor="test-3" size="lg">
        Large (lg)
      </Label>
      <NativeSelect id="test-3" size="lg" data-testid="select-lg">
        <option value="Italy">Italy</option>
        <option value="Spain">Spain</option>
        <option value="China">China</option>
        <option value="Germany">Germany</option>
      </NativeSelect>
    </div>
  </div>
);

export default Sizes;

      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 { NativeSelect, Label, 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">
      <Label htmlFor="dis-1" disabled>
        Disabled
      </Label>
      <NativeSelect 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>
      </NativeSelect>
      <Hint disabled>Informative message holder</Hint>
    </div>
    <div className="w-full">
      <Label htmlFor="err-1">Error</Label>
      <NativeSelect 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>
      </NativeSelect>
      <Hint error>
        <GenericInfo />
        Informative message holder
      </Hint>
    </div>
    <div className="w-full">
      <Label htmlFor="ro-1">Read only text</Label>
      <NativeSelect 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>
      </NativeSelect>
      <Hint>Informative message holder</Hint>
    </div>
  </div>
);

export default DifferentStates;

        Customization

        "use client";

import { NativeSelect, Label, 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">
      <Label htmlFor="c-1" className="text-piccolo">
        Medium (Default: md)
      </Label>
      <NativeSelect
        placeholder="Placeholder"
        id="c-1"
        className="[&_select]:bg-beerus [&_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>
      </NativeSelect>
      <Hint className="text-piccolo">Informative message holder</Hint>
    </div>
  </div>
);

export default CustomStyles;

          NativeSelect

          These are props specific to the NativeSelect component:

          Name
          Type
          Default
          size
          		"sm" | "md" | "lg"md
          error
          		boolean-
          disabled
          		boolean-
          className
          		string-