t-input-toggle

This component provides user toggle, validation and state. It has three toggles and four different designs and has many options to tweak its properties. It's also fully accessible.

Learn more about forms.

Basic Usage

Terms and Conditions
I agree toTerms and Conditions
<TInputToggle
  label="Terms and Conditions"
  hint="Please select one option"
  type="switcher"
  persistentHint //
/>

Helper Label

I agree to the terms and conditions

The User didn't Agree

import { TInputToggle, TInputToggleController, TCard, TText } from "@dija/tohama-components";
import { computed, defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const controller = TInputToggleController.create();

    const readable = computed(() => {
      if (!controller.state.value.data) {
        return "The user didn't agree";
      }
      return "The user has agreed";
    });

    return () => (
      <TCard design="outlined" p>
        <TInputToggle
          controller={controller}
          label="I agree to the terms and conditions"
          helper="Terms and Conditions"
          hint="Please select one option"
          persistentHint
        />

        <TText>{readable.value}</TText>
      </TCard>
    );
  },
});

Checkbox and Other Input Components

Terms and Conditions
<TGrid cols="1" colsMd="2" gap="4">
  <TInputText
    type="email"
    label="Email"
    placeholder="Enter your email"
    hint="Please enter a correct email"
    persistentPlaceholder
    persistentHint
  />
  <TInputToggle
    type="switcher"
    label="Terms and Conditions"
    hint="Please select one option"
    persistentHint //
  />
</TGrid>

API

No options available

Forms

t-input-text

Data

t-fetch-entries

Table of Contents