mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-01 15:03:57 +08:00

Files

catlog22 2fb93d20e0 feat: add queue management and terminal dashboard documentation in Chinese

- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure.
- Added terminal dashboard documentation, highlighting its layout, core features, and usage examples.
- Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.

2026-03-01 10:52:46 +08:00

3.1 KiB

Raw Blame History

title, description, sidebar

title	description	sidebar
Checkbox	Checkbox component for binary choice selection	auto

Checkbox

Overview

The Checkbox component allows users to select one or more options from a set. Built on Radix UI Checkbox Primitive, it provides full accessibility support including keyboard navigation.

Live Demo

:::demo checkbox-variants Shows different checkbox states including checked, unchecked, indeterminate, and disabled :::

Props

States

Unchecked

The default state when the checkbox is not selected.

Checked

The checkbox shows a checkmark icon when selected.

Indeterminate

A mixed state (partial selection) typically used for parent checkboxes when some but not all children are selected.

Disabled

Disabled checkboxes are non-interactive and displayed with reduced opacity.

Usage Examples

Basic Checkbox

<Checkbox />

With Label

<div class="flex items-center space-x-2">
  <Checkbox id="terms" />
  <label for="terms">I agree to the terms and conditions</label>
</div>

Controlled Checkbox

<script setup>
import { ref } from 'vue'

const checked = ref(false)
</script>

<template>
  <div class="flex items-center space-x-2">
    <Checkbox v-model:checked="checked" />
    <span>{{ checked ? 'Checked' : 'Unchecked' }}</span>
  </div>
</template>

Indeterminate State

<script setup>
import { ref } from 'vue'

const state = ref('indeterminate')
</script>

<template>
  <Checkbox :checked="state" />
</template>

Form Integration

<form @submit="handleSubmit">
  <div class="space-y-2">
    <div class="flex items-center space-x-2">
      <Checkbox id="newsletter" name="newsletter" value="yes" />
      <label for="newsletter">Subscribe to newsletter</label>
    </div>
    <div class="flex items-center space-x-2">
      <Checkbox id="updates" name="updates" value="yes" />
      <label for="updates">Receive product updates</label>
    </div>
  </div>
  <Button type="submit" class="mt-4">Submit</Button>
</form>

3.1 KiB Raw Blame History