Switch

Used to capture a binary state.

Demo

React
Vue

Size

Color scheme

Disabled

Read only

Invalid

Turn on the lights

Value:false

Usage

React
Vue

import { useState } from 'react';
import { Switch } from '@fintech-sandpit/ui/react';

const [accepted, setAccepted] = useState(false);

return (
  <Switch
    value={accepted}
    onChange={setAccepted}
  >
    Turn on the lights
  </Switch>
);

<script setup lang="ts">
import { ref } from 'vue';
import { Switch } from '@fintech-sandpit/ui/vue';

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

<template>
  <Switch v-model="accepted">
    Turn on the lights
  </Switch>
</template>

Props

React
Vue

Name	Type	Default	Description
`value`	`boolean`	—	The value of the switch (controlled)
`defaultValue`	`boolean`	—	The default value of the switch (uncontrolled)
`colorScheme`	`ColorScheme`	`neutral`	The color scheme of the switch
`size`	`Size`	`md`	The size of the switch
`disabled`	`boolean`	`false`	Whether the switch is disabled
`readOnly`	`boolean`	`false`	Whether the switch is read only
`invalid`	`boolean`	`false`	Whether the switch is invalid

Name	Type	Default	Description
`model-value`	`boolean`	—	The value of the switch (controlled) ¹
`default-value`	`boolean`	—	The default value of the switch (uncontrolled)
`color-scheme`	`ColorScheme`	`neutral`	The color scheme of the switch
`size`	`Size`	`md`	The size of the switch
`disabled`	`boolean`	`false`	Whether the switch is disabled
`read-only`	`boolean`	`false`	Whether the switch is read only
`invalid`	`boolean`	`false`	Whether the switch is invalid

Can be used with the v-model directive for two-way binding.

Slots

Name	Description
`default`	The label of the switch

Name	Type	Description
`onChange`	`(value: boolean) => void`	Event handler for when the value changes

Name	Payload	Description
`update:model-value`	`boolean`	Event handler for when the value changes

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'