Select Input

InputSelect - Native

<InputSelect
  name="name"
  title="Title"
  options={[
    {
      name: "Option 1",
      value: "1",
    },
    {
      name: "Option 2",
      value: "2",
    },
    {
      name: "Option 3",
      value: "3",
      disabled: true,
    },
  ]}
/>

InputSelect - Native with State

import { useState } from "react";
import InputSelect from "~/components/ui/input/InputSelect";

type SelectType = string | number | undefined;
export default function PreviewInputSelectWithState() {
  const [value, setValue] = useState<SelectType>("2");
  return (
    <InputSelect
      name="name"
      title="Title"
      options={[
        {
          name: "Option 1",
          value: "1",
        },
        {
          name: "Option 2",
          value: "2",
        },
      ]}
      value={value}
      setValue={setValue}
    />
  );
}

InputSelector - Custom Select

<InputSelector
  name="name"
  title="Title"
  options={[
    {
      name: "Option 1",
      value: "1",
    },
    {
      name: "Option 2",
      value: "2",
    },
  ]}
/>

InputSelector - Custom Select with State

import { useState } from "react";
import InputSelector from "~/components/ui/input/InputSelector";

type SelectType = string | number | undefined;
export default function PreviewInputSelectorWithState() {
  const [value, setValue] = useState<SelectType>("2");
  return (
    <InputSelector
      name="name"
      title="Title"
      options={[
        {
          name: "Option 1",
          value: "1",
        },
        {
          name: "Option 2",
          value: "2",
        },
      ]}
      value={value}
      setValue={setValue}
    />
  );
}

InputCombobox

<InputCombobox
  name="name"
  title="Title"
  options={[
    {
      name: "Option 1",
      value: "1",
    },
    {
      name: "Option 2",
      value: "2",
    },
  ]}
/>