t-input-dropdown

This component provides dropdown input, with validation and state. It has three different designs and has many options to tweak its properties. It's also fully accessible.

Learn more about forms.

Options List

Pass a list of options where an item contains a key, label, and value. The value can be any type you want, and you can pass the type to the object to have full type safety. The option object is generic, so you can do something like this: TInputDropdownOption<Post>.

In the following examples, the value is of type TInputDropdownOption<string>. And you can provide the same type when you create the controller like this: TInputDropdownController.create<string>().

import { TInputDropdownOption } from "@dija/tohama-components";

const options: TInputDropdownOption<string>[] = [
  {
    key: "lexus",
    label: "Lexus",
    disabled: true,
    value: "lexus",
  },
];

Basic Usage

<TInputDropdown
  options={options}
  label="Select Your Car"
  placeholder="Ford"
  hint="Please select an option"
  persistentHint
  hideOnClick
/>

Initial Value and Outlined Design

<TInputDropdown
  controller={TInputDropdownController.create<string>({
    value: {
      key: "ford",
      label: "Ford",
      value: "ford",
    },
  })}
  design="outlined"
  label="Select Your Car"
  placeholder="Search for cars..."
  hint="Please select an option"
  persistentPlaceholder
  persistentHint
  rounded
/>

Option Builder, Clearable and Solo Design

<TInputDropdown
  controller={TInputDropdownController.create<string>({
    value: {
      key: "chevrolet",
      label: "Chevrolet",
      value: "chevrolet",
    },
  })}
  design="solo"
  color="alert"
  size="lg"
  label="Select Your Car"
  placeholder="Ford"
  hint="Please select an option"
  optionBuilder={({ option, isSelected }) => (
    <option value={option.key} selected={isSelected} disabled={option.disabled} label={option.label} />
  )}
  persistentHint
  elevated
  surface
  circle
/>

With Other Input Components

<TGrid cols="1" colsMd="2" gap="4">
  <TInputText
    type="email"
    label="Email"
    placeholder="Enter your email"
    hint="Please enter a correct email"
    persistentPlaceholder
    persistentHint
  />
  <TInputDropdown
    options={options}
    label="Select Your Car"
    placeholder="Ford"
    hint="Please select an option"
    persistentPlaceholder
    persistentHint
  />
</TGrid>

API

No options available

Forms

t-input-date