t-input-choice

This component provides radio/checkbox 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 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: TInputChoiceOption<Post>.

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

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

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

Basic Usage

<TInputChoice
  controller={TInputChoiceController.create<string>()}
  options={options}
  label="Select Your Car"
  hint="Please select one option"
  persistentHint
/>

Switcher, Multiple and Horizontal Layout

Nothing Selected

export default defineComponent({
  setup() {
    const selected = ref<string[]>([]);

    const field = TInputChoiceController.create<string>({
      onUpdate: () => {
        if (field.value) {
          selected.value = field.value.map((i) => i.value);
        } else {
          selected.value = [];
        }
      },
    });

    return () => (
      <TInputChoice
        controller={field}
        options={options}
        label="Select Your Car"
        hint="Please select one option"
        type="switcher"
        persistentHint
        horizontal
        multiple
      />
    );
  },
});

Pragmatic Update Method

export default defineComponent({
  setup() {
    const field = TInputChoiceController.create<string>({
      // Initial value
      value: [options[1]],
    });

    const select = () => {
      field.update(options);
    };

    const unselect = () => {
      field.update([]);
    };

    return () => (
      <>
        <TInputChoice
          controller={field}
          options={options}
          label="Select Your Car"
          hint="Please select one option"
          type="switcher"
          persistentHint
          horizontal
          multiple
        />

        <TDivider my />

        <TButton onClick={select}>Select all</TButton>
        <TButton onClick={unselect}>Unselect all</TButton>
      </>
    );
  },
});

Checkbox and 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
  />
  <TInputChoice
    type="checkbox"
    label="Select Your Car"
    hint="Please select one option"
    options={options}
    horizontal
    persistentHint
  />
</TGrid>

API

No options available

Forms

t-input

Forms

t-input-date

Table of Contents