Preview Updated 2026-05-10

Switch

Binary toggle — 3 sizes, loading and disabled states, native `role=switch` semantics preserved.

Basic usage

Built on <CfInput type="checkbox" role="switch">, so keyboard, form, and screen reader behavior all work out of the box.

背景

Wi-Fi 已开启

<script setup lang="ts">
import { ref } from 'vue';
import { CfSwitch } from '@chufix-design/vue';

const wifi = ref(true);
</script>

<template>
  <CfSwitch v-model="wifi">Wi-Fi {{ wifi ? '已开启' : '已关闭' }}</CfSwitch>
</template>

<script setup>
import { ref } from 'vue';
import { CfSwitch } from '@chufix-design/vue';

const wifi = ref(true);
</script>

<template>
  <CfSwitch v-model="wifi">Wi-Fi {{ wifi ? '已开启' : '已关闭' }}</CfSwitch>
</template>

import { useState } from 'react';
import { CfSwitch } from '@chufix-design/react';

export default function Demo() {
const [wifi, setWifi] = useState(true);
return (
  <CfSwitch checked={wifi} onChange={(e) => setWifi(e.target.checked)}>
    Wi-Fi {wifi ? 'on' : 'off'}
  </CfSwitch>
);
}

import { useState } from 'react';
import { CfSwitch } from '@chufix-design/react';

export default function Demo() {
const [wifi, setWifi] = useState(true);
return (
  <CfSwitch checked={wifi} onChange={(e) => setWifi(e.target.checked)}>
    Wi-Fi {wifi ? 'on' : 'off'}
  </CfSwitch>
);
}

Sizes

背景

SmallMedium（默认）Large

<script setup lang="ts">
import { ref } from 'vue';
import { CfSwitch } from '@chufix-design/vue';

const a = ref(true);
const b = ref(false);
const c = ref(false);
</script>

<template>
  <div class="demo-stack">
    <CfSwitch v-model="a" size="sm">Small</CfSwitch>
    <CfSwitch v-model="b" size="md">Medium（默认）</CfSwitch>
    <CfSwitch v-model="c" size="lg">Large</CfSwitch>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfSwitch } from '@chufix-design/vue';

const a = ref(true);
const b = ref(false);
const c = ref(false);
</script>

<template>
  <div class="demo-stack">
    <CfSwitch v-model="a" size="sm">Small</CfSwitch>
    <CfSwitch v-model="b" size="md">Medium（默认）</CfSwitch>
    <CfSwitch v-model="c" size="lg">Large</CfSwitch>
  </div>
</template>

<CfSwitch size="sm">Small</CfSwitch>
<CfSwitch size="md">Medium</CfSwitch>
<CfSwitch size="lg">Large</CfSwitch>

<CfSwitch size="sm">Small</CfSwitch>
<CfSwitch size="md">Medium</CfSwitch>
<CfSwitch size="lg">Large</CfSwitch>

States

loading shows a spinner inside the thumb and temporarily blocks toggling. disabled disables the whole switch.

背景

自动同步（点击触发 1s 异步）禁用 · 已开禁用 · 已关

<script setup lang="ts">
import { ref } from 'vue';
import { CfSwitch } from '@chufix-design/vue';

const sync = ref(false);
const loading = ref(false);

async function toggle(v: boolean) {
  loading.value = true;
  await new Promise((r) => setTimeout(r, 1000));
  sync.value = v;
  loading.value = false;
}
</script>

<template>
  <div class="demo-stack">
    <CfSwitch
      :model-value="sync"
      :loading="loading"
      @change="toggle"
    >自动同步（点击触发 1s 异步）</CfSwitch>
    <CfSwitch :model-value="true" disabled>禁用 · 已开</CfSwitch>
    <CfSwitch :model-value="false" disabled>禁用 · 已关</CfSwitch>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfSwitch } from '@chufix-design/vue';

const sync = ref(false);
const loading = ref(false);

async function toggle(v) {
  loading.value = true;
  await new Promise((r) => setTimeout(r, 1000));
  sync.value = v;
  loading.value = false;
}
</script>

<template>
  <div class="demo-stack">
    <CfSwitch
      :model-value="sync"
      :loading="loading"
      @change="toggle"
    >自动同步（点击触发 1s 异步）</CfSwitch>
    <CfSwitch :model-value="true" disabled>禁用 · 已开</CfSwitch>
    <CfSwitch :model-value="false" disabled>禁用 · 已关</CfSwitch>
  </div>
</template>

import { useState } from 'react';
import { CfSwitch } from '@chufix-design/react';

export default function Demo() {
const [sync, setSync] = useState(false);
const [loading, setLoading] = useState(false);

async function toggle(e) {
  setLoading(true);
  await new Promise((r) => setTimeout(r, 1000));
  setSync(e.target.checked);
  setLoading(false);
}

return (
  <>
    <CfSwitch checked={sync} loading={loading} onChange={toggle}>
      Auto sync (1s async on click)
    </CfSwitch>
    <CfSwitch checked disabled>Disabled · on</CfSwitch>
  </>
);
}

import { useState } from 'react';
import { CfSwitch } from '@chufix-design/react';

export default function Demo() {
const [sync, setSync] = useState(false);
const [loading, setLoading] = useState(false);

async function toggle(e) {
  setLoading(true);
  await new Promise((r) => setTimeout(r, 1000));
  setSync(e.target.checked);
  setLoading(false);
}

return (
  <>
    <CfSwitch checked={sync} loading={loading} onChange={toggle}>
      Auto sync (1s async on click)
    </CfSwitch>
    <CfSwitch checked disabled>Disabled · on</CfSwitch>
  </>
);
}

API

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Overall size
`disabled`	`boolean`	`false`	Disabled
`loading`	`boolean`	`false`	Show spinner and block toggling

Two-way binding

Vue: v-model binds a boolean; @change receives the boolean.
React: controlled via checked + onChange; uncontrolled via defaultChecked. onChange is the native ChangeEvent.