Toggle

Toggle Props

Name

Type

Default

Description

checked

boolean

false

Defines whether the toggle input is checked or not

colors

object

Object with Tailwind CSS colors classes

colors.bgIos

string

'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-20'

colors.bgMaterial

string

'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'

colors.borderMaterial

string

'border-md-light-outline dark:border-md-dark-outline'

colors.checkedBgIos

string

'bg-primary'

colors.checkedBgMaterial

string

'bg-md-light-primary dark:bg-md-dark-primary'

colors.checkedBorderMaterial

string

'border-md-light-primary dark:border-md-dark-primary'

colors.checkedThumbBgIos

string

'bg-white'

colors.checkedThumbBgMaterial

string

'bg-md-light-on-primary dark:bg-md-dark-on-primary'

colors.thumbBgIos

string

'bg-white'

colors.thumbBgMaterial

string

'bg-md-light-outline dark:bg-md-dark-outline'

component

string

'label'

Component's HTML Element

defaultChecked

boolean

false

Defines whether the toggle input is checked or not, for the case if it is uncontrolled component

disabled

boolean

false

Defines whether the toggle input is disabled or not

name

string

Toggle input name

readonly

boolean

false

Defines whether the toggle input is readonly or not

touchRipple

boolean

true

Enables touch ripple effect in Material theme

value

any

Toggle input value

Toggle Events

Name

Type

Description

change

function(e)

Toggle input change event handler

Examples

<template>
  <i-page>
    <i-navbar title="Toggle" />

    <i-list strong inset>
      <i-list-item label title="Item 1">
        <template #after>
          <i-toggle
            component="div"
            class="-my-1"
            :checked="checked1"
            @change="() => (checked1 = !checked1)"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Item 2">
        <template #after>
          <i-toggle
            component="div"
            class="-my-1 k-color-brand-red"
            :checked="checked2"
            @change="() => (checked2 = !checked2)"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Item 3">
        <template #after>
          <i-toggle
            component="div"
            class="-my-1 k-color-brand-green"
            :checked="checked3"
            @change="() => (checked3 = !checked3)"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Item 4">
        <template #after>
          <i-toggle
            component="div"
            class="-my-1 k-color-brand-yellow"
            :checked="checked4"
            @change="() => (checked4 = !checked4)"
          />
        </template>
      </i-list-item>
    </i-list>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iList,
    iListItem,
    iToggle,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iList,
      iListItem,
      iToggle,
    },
    setup() {
      const checked1 = ref(true);
      const checked2 = ref(true);
      const checked3 = ref(true);
      const checked4 = ref(true);
      return {
        checked1,
        checked2,
        checked3,
        checked4,
      };
    },
  };
</script>

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  List,
  ListItem,
  Toggle,
} from 'ina-ui/react';

export default function TogglePage() {
  const [checked1, setChecked1] = useState(true);
  const [checked2, setChecked2] = useState(true);
  const [checked3, setChecked3] = useState(true);
  const [checked4, setChecked4] = useState(true);
  return (
    <Page>
      <Navbar
        title="Toggle"
        />

      <List strong inset>
        <ListItem
          label
          title="Item 1"
          after={
            <Toggle
              component="div"
              className="-my-1"
              checked={checked1}
              onChange={() => setChecked1(!checked1)}
            />
          }
        />
        <ListItem
          label
          title="Item 2"
          after={
            <Toggle
              component="div"
              className="-my-1 k-color-brand-red"
              checked={checked2}
              onChange={() => setChecked2(!checked2)}
            />
          }
        />
        <ListItem
          label
          title="Item 3"
          after={
            <Toggle
              component="div"
              className="-my-1 k-color-brand-green"
              checked={checked3}
              onChange={() => setChecked3(!checked3)}
            />
          }
        />
        <ListItem
          label
          title="Item 4"
          after={
            <Toggle
              component="div"
              className="-my-1 k-color-brand-yellow"
              checked={checked4}
              onChange={() => setChecked4(!checked4)}
            />
          }
        />
      </List>
    </Page>
  );
}

PreviousToast NextToolbar

Last updated 7 months ago