Toggle

Toggle is used for switching between two states. Use a toggle instead of a checkbox or radio button when you're enabling or disabling some feature or functionality.

Data Binding

Use v-model to bind the toggle to some data.

<template>
  <ci-toggle v-model="toggleValue" />
</template>

<script>
export default {
  data() {
    return {
      toggleValue: false
    }
  }
}
</script>

Label

Use label to label your toggle. You can also use a slot.

<template>
  <div>
    <ci-toggle v-model="toggleOne" label="Label with prop" />
    <ci-toggle v-model="toggleTwo">
      Label with slot
    </ci-toggle>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggleOne: false,
      toggleTwo: false
    };
  },
}
</script>

Disabled Toggles

Adding the disabled prop will disable the toggle and give it a disabled appearance.

<template>
  <ci-toggle
    v-model="toggleValue"
    label="Label with prop"
    disabled
  />
</template>

<script>
export default {
  data() {
    return {
      toggleValue: false
    };
  },
}
</script>