Checkbox

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

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

<template>
  <CfCheckbox v-model="agree">我同意服务协议</CfCheckbox>
</template>

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

export default function Demo() {
const [agree, setAgree] = useState(false);
return (
  <CfCheckbox checked={agree} onChange={(e) => setAgree(e.target.checked)}>
    I agree to the terms of service
  </CfCheckbox>
);
}

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

<template>
  <div class="demo-row">
    <CfCheckbox size="sm" :model-value="true">sm 已选</CfCheckbox>
    <CfCheckbox size="md" :model-value="true">md 已选</CfCheckbox>
    <CfCheckbox size="lg" :model-value="true">lg 已选</CfCheckbox>
    <CfCheckbox disabled>禁用</CfCheckbox>
    <CfCheckbox disabled :model-value="true">禁用已选</CfCheckbox>
  </div>
</template>

<CfCheckbox size="sm" defaultChecked>sm checked</CfCheckbox>
<CfCheckbox size="md" defaultChecked>md checked</CfCheckbox>
<CfCheckbox size="lg" defaultChecked>lg checked</CfCheckbox>
<CfCheckbox disabled>Disabled</CfCheckbox>
<CfCheckbox disabled defaultChecked>Disabled checked</CfCheckbox>

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

const apple = ref(true);
const banana = ref(false);
const cherry = ref(false);

const count = computed(
  () => [apple.value, banana.value, cherry.value].filter(Boolean).length,
);
const all = computed({
  get: () => count.value === 3,
  set(v) {
    apple.value = v;
    banana.value = v;
    cherry.value = v;
  },
});
const indeterminate = computed(() => count.value > 0 && count.value < 3);
</script>

<template>
  <div class="demo-stack">
    <CfCheckbox v-model="all" :indeterminate="indeterminate">全选</CfCheckbox>
    <div class="demo-row" style="padding-left: 1.5rem;">
      <CfCheckbox v-model="apple">苹果</CfCheckbox>
      <CfCheckbox v-model="banana">香蕉</CfCheckbox>
      <CfCheckbox v-model="cherry">樱桃</CfCheckbox>
    </div>
  </div>
</template>

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

export default function Demo() {
const [apple, setApple] = useState(true);
const [banana, setBanana] = useState(false);
const [cherry, setCherry] = useState(false);
const count = [apple, banana, cherry].filter(Boolean).length;

return (
  <>
    <CfCheckbox
      checked={count === 3}
      indeterminate={count > 0 && count < 3}
      onChange={(e) => {
        const v = e.target.checked;
        setApple(v); setBanana(v); setCherry(v);
      }}
    >Select all</CfCheckbox>
    <CfCheckbox checked={apple} onChange={(e) => setApple(e.target.checked)}>Apple</CfCheckbox>
    <CfCheckbox checked={banana} onChange={(e) => setBanana(e.target.checked)}>Banana</CfCheckbox>
    <CfCheckbox checked={cherry} onChange={(e) => setCherry(e.target.checked)}>Cherry</CfCheckbox>
  </>
);
}