t-input-select

This component provides a fully accessible select input, with validation and state. It has three different designs and has many options to tweak its properties. It allows auto-complete for long lists with asynchronous API for filtering options over HTTP.

Learn more about forms.

Options List

Pass a list of options where an option 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: TInputSelectOption<Post>.

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

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

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

Filtering

The controller accepts a onFilter callback which is called when the list needs updating. First, it's called when the field is interacted with. Then, it's called whenever the auto-complete field has changed.

You can handle filtering the options in any way you want. You only need to return a list of options that should be displayed to the user.

const list = options.slice();

const onFilter = async (query?: string): Promise<TInputSelectOption<string>[]> => {
  let options: TInputSelectOption<string>[] = list;
  if (query) {
    options = list.filter((option) => option.value.includes(query));
  }
  return options;
};

Basic Usage

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

Initial Value, Multiple, and Outlined Design

<TInputSelect
  controller={TInputSelectController.create<string>({
    value: [options[0]],
    onFilter: onFilter,
  })}
  design="outlined"
  label="Select Your Car"
  placeholder="Search for cars..."
  hint="Please select one option"
  persistentPlaceholder
  persistentHint
  multiple
  rounded
/>

Searchable, Option Builder, Clearable and Solo Design

<TInputSelect
  controller={TInputSelectController.create<string>({
    value: options.splice(0, 2),
    onFilter: onFilter,
  })}
  design="solo"
  color="alert"
  size="lg"
  label="Select Your Car"
  placeholder="Ford"
  hint="Please select one option"
  optionBuilder={({ option, isSelected, isHighlighted, onClick }) => (
    <TButton
      size="lg"
      design={isSelected || isHighlighted ? "flat" : "text"}
      color={isSelected ? "alert" : "secondary"}
      onClick={() => onClick(option)}
      icon={() => (
        <TAvatar
          class="w-10 h-10"
          design="flat"
          src={`https://source.unsplash.com/64x64/?${option.value}`}
          circle //
        />
      )}
      block
    >
      <TText size="re" color={isSelected ? "alert" : "secondary"}>
        {option.label}
      </TText>
      <TText size="sm">{option.value}</TText>
    </TButton>
  )}
  persistentHint
  searchable
  multiple
  elevated
  surface
  circle
  chips
/>

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
  />
  <TInputSelect
    options={options}
    label="Select Your Car"
    placeholder="Ford"
    hint="Please select one option"
    persistentHint
  />
</TGrid>

API

No options available

Forms

t-input-editor

Forms

t-input-text

Table of Contents