Checkbox

import { ref } from 'vue';

export default {
  setup: () => {
    const checked = ref(false);
    const onChange = (e) => {
      checked.value = e.target.checked;
      console.log('Checked:', checked.value);
    };
    return () => <dv-checkbox checked={checked.value} onChange={onChange} />;
  },
};
tsx

<dv-checkbox>Orange</dv-checkbox> <dv-checkbox>Apple</dv-checkbox>
vue

export default {
  setup: () => {
    const types = ['neutral', 'primary', 'secondary', 'accent'];
    return () => (
      <div class="flex flex-col items-center space-y-4">
        {types.map((type) => (
          <div key={type} class="w-32">
            <dv-checkbox variant={type} defaultChecked>
              {type}
            </dv-checkbox>
          </div>
        ))}
      </div>
    );
  },
};
tsx

export default {
  setup: () => {
    const types = ['xs', 'sm', 'md', 'lg'];
    return () => (
      <div class="flex flex-col items-center space-y-4">
        {types.map((size) => (
          <div key={size}>
            <dv-checkbox size={size} defaultChecked />
          </div>
        ))}
      </div>
    );
  },
};
tsx

<dv-checkbox disabled>Orange</dv-checkbox>
<dv-checkbox defaultChecked disabled>Apple</dv-checkbox>
vue

<dv-checkbox indeterminate>Orange</dv-checkbox>
<dv-checkbox indeterminate defaultChecked>Apple</dv-checkbox>
<dv-checkbox indeterminate disabled>Pear</dv-checkbox>
vue

import { ref } from 'vue';

export default {
  setup: () => {
    const options = [
      { value: 'apple', label: 'Apple' },
      { value: 'pear', label: 'Pear' },
      { value: 'orange', label: 'Orange' },
    ];
    const value = ref(['apple', 'pear']);
    const disabled = ref(false);

    return () => (
      <div>
        <div class="flex items-center">
          <label class="mr-4">Disabled:</label>
          <dv-toggle
            checked={disabled.value}
            onChange={(e) => (disabled.value = e.target.checked)}
          />
        </div>
        <dv-divider />
        <dv-checkbox-group
          size="lg"
          options={options}
          disabled={disabled.value}
          v-model={value.value}
        />
      </div>
    );
  },
};
tsx