Switch

A switch component that toggles between two states. It supports both iOS (default) and Material Design styles.

Usage

iOS Style (Default)

Value: true

Red Color

Material Style

Value: false

<template>
  <Column :gap="32">
    <!-- iOS Style (Default) -->
    <Column :gap="10">
      <Text :style="{ fontWeight: FontWeight.bold }">iOS Style (Default)</Text>
      <Row :gap="20" cross-axis-alignment="center">
        <Switch v-model:value="iosVal" />
        <Text>Value: {{ iosVal }}</Text>
      </Row>
      <Row :gap="20" cross-axis-alignment="center">
        <Switch v-model:value="iosVal2" active-color="#FF3B30" />
        <Text>Red Color</Text>
      </Row>
    </Column>

    <!-- Material Style -->
    <Column :gap="10">
      <Text :style="{ fontWeight: FontWeight.bold }">Material Style</Text>
      <Row :gap="20" cross-axis-alignment="center">
        <Switch v-model:value="materialVal" variant="material" />
        <Text>Value: {{ materialVal }}</Text>
      </Row>
    </Column>
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Column, Row, Text, Switch, FontWeight } from "fluekit";

const iosVal = ref(true);
const iosVal2 = ref(true);
const materialVal = ref(false);
</script>

API

Props

Name	Type	Default	Description
value	boolean	-	Whether this switch is on or off.
variant	'material' | 'ios'	'ios'	The style variant of the switch.
activeColor	string	#34C759 (iOS) / #2196F3 (Mat)	The color to use when this switch is on.
activeTrackColor	string	-	The color to use on the track when this switch is on.
inactiveThumbColor	string	-	The color to use on the thumb when this switch is off.
inactiveTrackColor	string	-	The color to use on the track when this switch is off.

Events

Name	Description
update:value	Emitted when the value changes.
change	Emitted when the user toggles the switch.