Toggle

Switch control for binary on/off states with optional title and subtitle.

Open in Storybook

Interactive Demo

Dark mode

Use dark theme across the app

Email notifications

Receive updates about your account

Disabled toggle

Usage

<script setup>
import { ref } from 'vue';
import { Toggle } from '@yellowcard/b2b-design-system';

const enabled = ref(false);
</script>

<template>
  <Toggle
    v-model="enabled"
    title="Email notifications"
    subtitle="Receive updates about your account"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
modelValue	boolean	—	Toggle state (v-model)
size	string	—	Toggle size
title	string	—	Label text
subtitle	string	—	Description text
disabled	boolean	false	Disabled state
ariaLabel	string	—	Accessible label

Events

Event	Payload	Description
update:modelValue	boolean	Toggle state changed