t-toggle

This is component used to display a boolean toggle. It's used internally in t-input-toggle and can be used as a standalone component by passing the current value.

Basic Usage

export default defineComponent({
  setup() {
    const status = ref(true);

    const onClick = () => {
      status.value = !status.value;
    };

    return () => (
      <TCard design="outlined" p>
        <TFlex align="center" justify="between">
          <TToggle label="Toggle Me" type="switcher" value={status.value} onClick={onClick} />
          <TButton color="primary" design="flat" size="md" onClick={onClick}>
            {status.value ? "On" : "Off"}
          </TButton>
        </TFlex>
      </TCard>
    );
  },
});

Sizes and Colors

<TToggle label="Toggle Me" type="radio" color="alert" size="md" value={true} />

Slot

<TToggle
  label={() => (
    <TText>
      I agree to the
      <TLink color="primary" to="/">
        Terms of Service
      </TLink>
    </TText>
  )}
  type="switcher"
  color="success"
  value={true}
/>

API

No options available

Components

t-title

Components

t-tohama-brand

Table of Contents