Checkbox

A control that allows the user to toggle between checked and not checked.

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'
</script>

<template>
  <Checkbox.Root>
    <Checkbox.Control>
      <Checkbox.Indicator>
        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Label>Checkbox</Checkbox.Label>
    <Checkbox.HiddenInput />
  </Checkbox.Root>
</template>

import { Checkbox } from '@destyler-ui/react'

export function Basic(props: Checkbox.RootProps) {
  return (
    <Checkbox.Root {...props}>
      <Checkbox.Label>Checkbox</Checkbox.Label>
      <Checkbox.Control>
        <Checkbox.Indicator>
          x
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { CheckIcon } from 'lucide-solid'

export function Basic() {
  return (
    <Checkbox.Root>
      <Checkbox.Label>Checkbox</Checkbox.Label>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

<script module lang="ts">
  import type { CheckboxRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends CheckboxRootProps {}
</script>

<script lang="ts">
  import { Checkbox } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
</script>

<Checkbox.Root {...props}>
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control>
    <Checkbox.Indicator>x</Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.HiddenInput />
</Checkbox.Root>

Anatomy

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'
</script>

<template>
  <Checkbox.Root>
    <Checkbox.Control>
      <Checkbox.Indicator />
    </Checkbox.Control>
    <Checkbox.Label />
    <Checkbox.HiddenInput />
  </Checkbox.Root>
</template>

import { Checkbox } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Checkbox.Root>
      <Checkbox.Control>
        <Checkbox.Indicator />
      </Checkbox.Control>
      <Checkbox.Label />
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

import { Checkbox } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Checkbox.Root>
      <Checkbox.Control>
        <Checkbox.Indicator />
      </Checkbox.Control>
      <Checkbox.Label />
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

<script lang="ts">
  import { Checkbox } from '@destyler-ui/svelte'
</script>

<Checkbox.Root>
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control>
    <Checkbox.Indicator>✓</Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.HiddenInput />
</Checkbox.Root>

Examples

Basic

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'
</script>

<template>
  <Checkbox.Root>
    <Checkbox.Control>
      <Checkbox.Indicator>
        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Label>Checkbox</Checkbox.Label>
    <Checkbox.HiddenInput />
  </Checkbox.Root>
</template>

import { Checkbox } from '@destyler-ui/react'

export function Basic(props: Checkbox.RootProps) {
  return (
    <Checkbox.Root {...props}>
      <Checkbox.Label>Checkbox</Checkbox.Label>
      <Checkbox.Control>
        <Checkbox.Indicator>
          x
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { CheckIcon } from 'lucide-solid'

export function Basic() {
  return (
    <Checkbox.Root>
      <Checkbox.Label>Checkbox</Checkbox.Label>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

<script module lang="ts">
  import type { CheckboxRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends CheckboxRootProps {}
</script>

<script lang="ts">
  import { Checkbox } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
</script>

<Checkbox.Root {...props}>
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control>
    <Checkbox.Indicator>x</Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.HiddenInput />
</Checkbox.Root>

Controlled

Control the checked state programmatically.

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'
import { ref } from 'vue'

const checked = ref<Checkbox.CheckedState>(true)
</script>

<template>
  <main>
    <output>{{ checked }}</output>
    <button @click="() => (checked = true)">Set Checked</button>
    <Checkbox.Root v-model:checked="checked">
      <Checkbox.Control>
        <Checkbox.Indicator>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Checkbox</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  </main>
</template>

import { useState } from 'react'
import { Checkbox } from '@destyler-ui/react'

export function Controlled() {
  const [checked, setChecked] = useState<Checkbox.CheckedState>(true)

  return (
    <>
      {String(checked)}
      <Checkbox.Root checked={checked} onCheckedChange={e => setChecked(e.checked)}>
        <Checkbox.Label>Checkbox</Checkbox.Label>
        <Checkbox.Control>
          <Checkbox.Indicator>
            x
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    </>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { CheckIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'

export function Controlled() {
  const [checked, setChecked] = createSignal<Checkbox.CheckedState>(true)
  return (
    <Checkbox.Root checked={checked()} onCheckedChange={e => setChecked(e.checked)}>
      <Checkbox.Label>Checkbox</Checkbox.Label>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

<script lang="ts">
  import type { CheckboxCheckedState } from '@destyler-ui/svelte'
  import { Checkbox } from '@destyler-ui/svelte'

  let checked = $state<CheckboxCheckedState>(true)
</script>

<output>{String(checked)}</output>
<Checkbox.Root bind:checked>
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control><Checkbox.Indicator>x</Checkbox.Indicator></Checkbox.Control>
  <Checkbox.HiddenInput />
</Checkbox.Root>

Group

Use Checkbox.Group to manage multiple checkboxes as a group.

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]
</script>

<template>
  <Checkbox.Group :defaultValue="['react']" name="framework" @valueChange="console.log">
    <Checkbox.Root v-for="item in items" :value="item.value" :key="item.value">
      <Checkbox.Control>
        <Checkbox.Indicator>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>{{ item.label }}</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  </Checkbox.Group>
</template>

import { Checkbox } from '@destyler-ui/react'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

export function Group() {
  return (
    <Checkbox.Group defaultValue={['react']} name="framework">
      {items.map(item => (
        <Checkbox.Root value={item.value} key={item.value}>
          <Checkbox.Control>
            <Checkbox.Indicator>
              <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </Checkbox.Indicator>
          </Checkbox.Control>
          <Checkbox.Label>{item.label}</Checkbox.Label>
          <Checkbox.HiddenInput />
        </Checkbox.Root>
      ))}
    </Checkbox.Group>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { CheckIcon } from 'lucide-solid'
import { For } from 'solid-js'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

export function Group() {
  return (
    <Checkbox.Group defaultValue={['react']} name="framework" onValueChange={console.warn}>
      <For each={items}>
        {item => (
          <Checkbox.Root value={item.value}>
            <Checkbox.Label>{item.label}</Checkbox.Label>
            <Checkbox.Control>
              <Checkbox.Indicator>
                <CheckIcon />
              </Checkbox.Indicator>
            </Checkbox.Control>
            <Checkbox.HiddenInput />
          </Checkbox.Root>
        )}
      </For>
    </Checkbox.Group>
  )
}

<script module lang="ts">
  import type { CheckboxGroupProps } from '@destyler-ui/svelte'

  export interface GroupProps extends CheckboxGroupProps {}
</script>

<script lang="ts">
  import { Checkbox } from '@destyler-ui/svelte'

  const props: GroupProps = $props()
  const items = [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
  ]
</script>

<Checkbox.Group defaultValue={['react']} name="framework" {...props}>
  {#each items as item (item.value)}
    <Checkbox.Root value={item.value}>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path
              d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>{item.label}</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  {/each}
</Checkbox.Group>

Group Controlled

Control the selected values of a checkbox group programmatically.

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'
import { ref } from 'vue'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

const value = ref(['react'])
</script>

<template>
  <div>
    <Checkbox.Group v-model="value" name="framework">
      <Checkbox.Root v-for="item in items" :value="item.value" :key="item.value">
        <Checkbox.Control>
          <Checkbox.Indicator>
            <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
              <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label>{{ item.label }}</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    </Checkbox.Group>
    <pre>Selected: {{ JSON.stringify(value) }}</pre>
  </div>
</template>

import { useState } from 'react'
import { Checkbox } from '@destyler-ui/react'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

export function GroupControlled() {
  const [value, setValue] = useState(['react'])
  return (
    <div>
      <Checkbox.Group value={value} name="framework" onValueChange={setValue}>
        {items.map(item => (
          <Checkbox.Root value={item.value} key={item.value}>
            <Checkbox.Control>
              <Checkbox.Indicator>
                <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                  <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </Checkbox.Indicator>
            </Checkbox.Control>
            <Checkbox.Label>{item.label}</Checkbox.Label>
            <Checkbox.HiddenInput />
          </Checkbox.Root>
        ))}
      </Checkbox.Group>
      <pre>
        Selected:
        {' '}
        {JSON.stringify(value)}
      </pre>
    </div>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { CheckIcon } from 'lucide-solid'
import { createSignal, For } from 'solid-js'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

export function GroupControlled() {
  const [value, setValue] = createSignal(['react'])

  return (
    <div>
      <Checkbox.Group value={value} name="framework" onValueChange={setValue}>
        <For each={items}>
          {item => (
            <Checkbox.Root value={item.value}>
              <Checkbox.Control>
                <Checkbox.Indicator>
                  <CheckIcon />
                </Checkbox.Indicator>
              </Checkbox.Control>
              <Checkbox.Label>{item.label}</Checkbox.Label>
              <Checkbox.HiddenInput />
            </Checkbox.Root>
          )}
        </For>
      </Checkbox.Group>
      <pre>Selected: {JSON.stringify(value())}</pre>
    </div>
  )
}

<script lang="ts">
  import { Checkbox } from '@destyler-ui/svelte'

  const items = [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
  ]
  let value = $state(['react'])
</script>

<div>
  <Checkbox.Group {value} name="framework" onValueChange={(nextValue) => value = nextValue}>
    {#each items as item (item.value)}
      <Checkbox.Root value={item.value}>
        <Checkbox.Control>
          <Checkbox.Indicator>
            <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
              <path
                d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label>{item.label}</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    {/each}
  </Checkbox.Group>
  <pre>Selected: {JSON.stringify(value)}</pre>
</div>

Group With Form

Use a checkbox group inside a form.

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

function handleSubmit(e: Event) {
  e.preventDefault()
  // eslint-disable-next-line no-console
  console.log(new FormData(e.currentTarget as HTMLFormElement).getAll('framework'))
}
</script>

<template>
  <form @submit="handleSubmit">
    <Checkbox.Group :defaultValue="['react']" name="framework">
      <Checkbox.Root v-for="item in items" :value="item.value" :key="item.value">
        <Checkbox.Control>
          <Checkbox.Indicator>
            <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
              <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label>{{ item.label }}</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    </Checkbox.Group>
    <button type="submit">Submit</button>
  </form>
</template>

import { Checkbox } from '@destyler-ui/react'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

export function GroupWithForm() {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        // eslint-disable-next-line no-console
        console.log(new FormData(e.currentTarget).getAll('framework'))
      }}
    >
      <Checkbox.Group defaultValue={['react']} name="framework">
        {items.map(item => (
          <Checkbox.Root value={item.value} key={item.value}>
            <Checkbox.Control>
              <Checkbox.Indicator>
                <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                  <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </Checkbox.Indicator>
            </Checkbox.Control>
            <Checkbox.Label>{item.label}</Checkbox.Label>
            <Checkbox.HiddenInput />
          </Checkbox.Root>
        ))}
      </Checkbox.Group>
      <button type="submit">Submit</button>
    </form>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { CheckIcon } from 'lucide-solid'
import { For } from 'solid-js'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

export function GroupWithForm() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault()
        // eslint-disable-next-line no-console
        console.log(new FormData(event.currentTarget).getAll('framework'))
      }}
    >
      <Checkbox.Group defaultValue={['react']} name="framework">
        <For each={items}>
          {item => (
            <Checkbox.Root value={item.value}>
              <Checkbox.Control>
                <Checkbox.Indicator>
                  <CheckIcon />
                </Checkbox.Indicator>
              </Checkbox.Control>
              <Checkbox.Label>{item.label}</Checkbox.Label>
              <Checkbox.HiddenInput />
            </Checkbox.Root>
          )}
        </For>
      </Checkbox.Group>
      <button type="submit">Submit</button>
    </form>
  )
}

<script lang="ts">
  import { Checkbox } from '@destyler-ui/svelte'

  const items = [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
  ]
  function handleSubmit(event: SubmitEvent) {
    event.preventDefault()
    // eslint-disable-next-line no-console
    console.log(new FormData(event.currentTarget as HTMLFormElement).getAll('framework'))
  }
</script>

<form onsubmit={handleSubmit}>
  <Checkbox.Group defaultValue={['react']} name="framework">
    {#each items as item (item.value)}
      <Checkbox.Root value={item.value}>
        <Checkbox.Control>
          <Checkbox.Indicator>
            <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
              <path
                d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label>{item.label}</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    {/each}
  </Checkbox.Group>
  <button type="submit">Submit</button>
</form>

Group With Invalid

Mark a checkbox group as invalid.

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]
</script>

<template>
  <Checkbox.Group invalid>
    <Checkbox.Root v-for="item in items" :value="item.value" :key="item.value">
      <Checkbox.Control>
        <Checkbox.Indicator>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>{{ item.label }}</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  </Checkbox.Group>
</template>

import { Checkbox } from '@destyler-ui/react'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

export function GroupWithInvalid() {
  return (
    <Checkbox.Group invalid>
      {items.map(item => (
        <Checkbox.Root value={item.value} key={item.value}>
          <Checkbox.Control>
            <Checkbox.Indicator>
              <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </Checkbox.Indicator>
          </Checkbox.Control>
          <Checkbox.Label>{item.label}</Checkbox.Label>
          <Checkbox.HiddenInput />
        </Checkbox.Root>
      ))}
    </Checkbox.Group>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { CheckIcon } from 'lucide-solid'
import { For } from 'solid-js'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

export function GroupWithInvalid() {
  return (
    <Checkbox.Group invalid>
      <For each={items}>
        {item => (
          <Checkbox.Root value={item.value}>
            <Checkbox.Control>
              <Checkbox.Indicator>
                <CheckIcon />
              </Checkbox.Indicator>
            </Checkbox.Control>
            <Checkbox.Label>{item.label}</Checkbox.Label>
            <Checkbox.HiddenInput />
          </Checkbox.Root>
        )}
      </For>
    </Checkbox.Group>
  )
}

<script lang="ts">
  import { Checkbox } from '@destyler-ui/svelte'

  const items = [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
  ]
</script>

<Checkbox.Group invalid>
  {#each items as item (item.value)}
    <Checkbox.Root value={item.value}>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path
              d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>{item.label}</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  {/each}
</Checkbox.Group>

Group With Select All

Select or deselect all items in a checkbox group.

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'
import { computed, ref } from 'vue'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

const value = ref<string[]>([])

const allSelected = computed(() => value.value.length === items.length)
const indeterminate = computed(() => value.value.length > 0 && value.value.length < items.length)

function handleSelectAll(checked: boolean) {
  value.value = checked ? items.map(item => item.value) : []
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px;">
    <Checkbox.Root value="all" :checked="indeterminate ? 'indeterminate' : allSelected" @checkedChange="handleSelectAll(!!$event.checked)">
      <Checkbox.Control>
        <Checkbox.Indicator>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </Checkbox.Indicator>
        <Checkbox.Indicator indeterminate>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path d="M3 7H11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
          </svg>
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Select All</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>

    <Checkbox.Group v-model="value" name="framework">
      <Checkbox.Root v-for="item in items" :value="item.value" :key="item.value">
        <Checkbox.Control>
          <Checkbox.Indicator>
            <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
              <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label>{{ item.label }}</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    </Checkbox.Group>

    <pre>Selected: {{ JSON.stringify(value) }}</pre>
  </div>
</template>

import { useState } from 'react'
import { Checkbox } from '@destyler-ui/react'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

function CheckboxItem({ children, ...props }: Checkbox.RootProps) {
  return (
    <Checkbox.Root {...props}>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </Checkbox.Indicator>
        <Checkbox.Indicator indeterminate>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path d="M3 7H11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
          </svg>
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>{children}</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

export function GroupWithSelectAll() {
  const [value, setValue] = useState<string[]>([])

  const handleSelectAll = (checked: boolean) => {
    setValue(checked ? items.map(item => item.value) : [])
  }

  const allSelected = value.length === items.length
  const indeterminate = value.length > 0 && value.length < items.length

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <CheckboxItem
        value="all"
        checked={indeterminate ? 'indeterminate' : allSelected}
        onCheckedChange={e => handleSelectAll(!!e.checked)}
      >
        Select All
      </CheckboxItem>

      <Checkbox.Group value={value} name="framework" onValueChange={setValue}>
        {items.map(item => (
          <CheckboxItem value={item.value} key={item.value}>
            {item.label}
          </CheckboxItem>
        ))}
      </Checkbox.Group>

      <pre>
        Selected:
        {' '}
        {JSON.stringify(value)}
      </pre>
    </div>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { CheckIcon, MinusIcon } from 'lucide-solid'
import { createMemo, createSignal, For, splitProps } from 'solid-js'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]

function CheckboxItem(props: Checkbox.RootProps) {
  const [local, rootProps] = splitProps(props, ['children'])

  return (
    <Checkbox.Root {...rootProps}>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <CheckIcon />
        </Checkbox.Indicator>
        <Checkbox.Indicator indeterminate>
          <MinusIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>{local.children}</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

export function GroupWithSelectAll() {
  const [value, setValue] = createSignal<string[]>([])
  const allSelected = createMemo(() => value().length === items.length)
  const indeterminate = createMemo(() => value().length > 0 && value().length < items.length)

  const handleSelectAll = (checked: boolean) => {
    setValue(checked ? items.map(item => item.value) : [])
  }

  return (
    <div style={{ 'display': 'flex', 'flex-direction': 'column', 'gap': '10px' }}>
      <CheckboxItem
        value="all"
        checked={indeterminate() ? 'indeterminate' : allSelected()}
        onCheckedChange={details => handleSelectAll(!!details.checked)}
      >
        Select All
      </CheckboxItem>

      <Checkbox.Group value={value} name="framework" onValueChange={setValue}>
        <For each={items}>
          {item => <CheckboxItem value={item.value}>{item.label}</CheckboxItem>}
        </For>
      </Checkbox.Group>

      <pre>Selected: {JSON.stringify(value())}</pre>
    </div>
  )
}

<script lang="ts">
  import type { CheckboxCheckedState } from '@destyler-ui/svelte'
  import { Checkbox } from '@destyler-ui/svelte'

  const items = [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
  ]
  let value = $state<string[]>([])
  const allSelected = $derived(value.length === items.length)
  const indeterminate = $derived(value.length > 0 && value.length < items.length)
  const selectAllState = $derived<CheckboxCheckedState>(indeterminate ? 'indeterminate' : allSelected)
</script>

<div style="display: flex; flex-direction: column; gap: 10px;">
  <Checkbox.Root
    value="all"
    checked={selectAllState}
    onCheckedChange={(details) => value = details.checked ? items.map((item) => item.value) : []}
  >
    <Checkbox.Control>
      <Checkbox.Indicator>
        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <path
            d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </Checkbox.Indicator>
      <Checkbox.Indicator indeterminate>
        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <path d="M3 7H11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Label>Select All</Checkbox.Label>
    <Checkbox.HiddenInput />
  </Checkbox.Root>

  <Checkbox.Group {value} name="framework" onValueChange={(nextValue) => value = nextValue}>
    {#each items as item (item.value)}
      <Checkbox.Root value={item.value}>
        <Checkbox.Control>
          <Checkbox.Indicator>
            <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
              <path
                d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label>{item.label}</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    {/each}
  </Checkbox.Group>

  <pre>Selected: {JSON.stringify(value)}</pre>
</div>

Indeterminate

Display a checkbox in an indeterminate state.

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'
</script>

<template>
  <Checkbox.Root checked="indeterminate">
    <Checkbox.Control data-testid="control">
      <Checkbox.Indicator>
        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </Checkbox.Indicator>
      <Checkbox.Indicator indeterminate>
        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <path d="M3 7H11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Label>Checkbox</Checkbox.Label>
    <Checkbox.HiddenInput />
  </Checkbox.Root>
</template>

import { Checkbox } from '@destyler-ui/react'

export function Indeterminate() {
  return (
    <Checkbox.Root checked="indeterminate">
      <Checkbox.Label>Checkbox</Checkbox.Label>
      <Checkbox.Control data-testid="control">
        <Checkbox.Indicator>
          +
        </Checkbox.Indicator>
        <Checkbox.Indicator indeterminate>
          _
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { CheckIcon, MinusIcon } from 'lucide-solid'

export function Indeterminate() {
  return (
    <Checkbox.Root checked="indeterminate">
      <Checkbox.Label>Checkbox</Checkbox.Label>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <CheckIcon />
        </Checkbox.Indicator>
        <Checkbox.Indicator indeterminate>
          <MinusIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

<script lang="ts">
  import { Checkbox } from '@destyler-ui/svelte'
</script>

<Checkbox.Root checked="indeterminate">
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control data-testid="control">
    <Checkbox.Indicator>+</Checkbox.Indicator>
    <Checkbox.Indicator indeterminate>_</Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.HiddenInput />
</Checkbox.Root>

Render Prop

Use render prop for custom checkbox rendering.

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'
</script>

<template>
  <Checkbox.Root>
    <Checkbox.Control>
      <Checkbox.Indicator>
        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Context v-slot="checkbox">
      <Checkbox.Label>Checkbox {{ checkbox.checked.toString() }}</Checkbox.Label>
    </Checkbox.Context>
    <Checkbox.HiddenInput />
  </Checkbox.Root>
</template>

import { Checkbox } from '@destyler-ui/react'

export function RenderProp() {
  return (
    <Checkbox.Root>
      <Checkbox.Control>
        <Checkbox.Indicator>
          x
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Context>
        {checkbox => (
          <Checkbox.Label>
            Checkbox
            {checkbox.checked.toString()}
          </Checkbox.Label>
        )}
      </Checkbox.Context>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { CheckIcon } from 'lucide-solid'

export function RenderProp() {
  return (
    <Checkbox.Root>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Context>
        {checkbox => <Checkbox.Label>Checkbox {checkbox().checked.toString()}</Checkbox.Label>}
      </Checkbox.Context>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

<script lang="ts">
  import { Checkbox } from '@destyler-ui/svelte'
</script>

<Checkbox.Root>
  <Checkbox.Control><Checkbox.Indicator>x</Checkbox.Indicator></Checkbox.Control>
  <Checkbox.Context>
    {#snippet render(checkbox)}
      <Checkbox.Label>Checkbox {String(checkbox().checked)}</Checkbox.Label>
    {/snippet}
  </Checkbox.Context>
  <Checkbox.HiddenInput />
</Checkbox.Root>

With Field

Combine checkbox with a form field for validation and labeling.

<script setup lang="ts">
import { Checkbox } from '@destyler-ui/vue'
import { Field } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root>
    <Checkbox.Root>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </Checkbox.Indicator>
        <Checkbox.Indicator indeterminate>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path d="M3 7H11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
          </svg>
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Label</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'
import { Checkbox } from '@destyler-ui/react'

export function WithField(props: Field.RootProps) {
  return (
    <Field.Root {...props}>
      <Checkbox.Root>
        <Checkbox.Label>Label</Checkbox.Label>
        <Checkbox.Control>
          <Checkbox.Indicator>
            +
          </Checkbox.Indicator>
          <Checkbox.Indicator indeterminate>
            _
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { Field } from '@destyler-ui/solid/field'
import { CheckIcon, MinusIcon } from 'lucide-solid'

export function WithField(props: Field.RootProps) {
  return (
    <Field.Root {...props}>
      <Checkbox.Root>
        <Checkbox.Label>Label</Checkbox.Label>
        <Checkbox.Control>
          <Checkbox.Indicator>
            <CheckIcon />
          </Checkbox.Indicator>
          <Checkbox.Indicator indeterminate>
            <MinusIcon />
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  import type { FieldRootProps } from '@destyler-ui/svelte'

  export interface WithFieldProps extends FieldRootProps {}
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
  import { Checkbox } from '@destyler-ui/svelte'

  const props: WithFieldProps = $props()
</script>

<Field.Root {...props}>
  <Checkbox.Root>
    <Checkbox.Label>Label</Checkbox.Label>
    <Checkbox.Control>
      <Checkbox.Indicator>+</Checkbox.Indicator>
      <Checkbox.Indicator indeterminate>_</Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.HiddenInput />
  </Checkbox.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Root Provider

<script setup lang="ts">
import { Checkbox, useCheckbox } from '@destyler-ui/vue'

const checkbox = useCheckbox()
</script>

<template>
  <main>
    <output>{{ checkbox.checked ? 'Checked' : 'UnChecked' }}</output>
    <button @click="checkbox.toggleChecked()">Toggle</button>
    <Checkbox.RootProvider :value="checkbox">
      <Checkbox.Control>
        <Checkbox.Indicator>
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Checkbox</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.RootProvider>
  </main>
</template>

import { Checkbox, useCheckbox } from '@destyler-ui/react'

export function RootProvider() {
  const checkbox = useCheckbox()

  return (
    <>
      <span>{checkbox.checked ? 'Checked' : 'UnChecked'}</span>

      <Checkbox.RootProvider value={checkbox}>
        <Checkbox.Label>Checkbox</Checkbox.Label>
        <Checkbox.Control>
          <Checkbox.Indicator>
            x
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.HiddenInput />
      </Checkbox.RootProvider>
    </>
  )
}

import { Checkbox, useCheckbox } from '@destyler-ui/solid/checkbox'
import { CheckIcon } from 'lucide-solid'

export function RootProvider() {
  const checkbox = useCheckbox()

  return (
    <>
      <span>{checkbox().checked ? 'Checked' : 'UnChecked'}</span>

      <Checkbox.RootProvider value={checkbox}>
        <Checkbox.Label>Checkbox</Checkbox.Label>
        <Checkbox.Control>
          <Checkbox.Indicator>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.HiddenInput />
      </Checkbox.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Checkbox, useCheckbox } from '@destyler-ui/svelte'

  const id = $props.id()
  const checkbox = useCheckbox({ id })
</script>

<output>{checkbox().checked ? 'Checked' : 'UnChecked'}</output>
<button type="button" onclick={() => checkbox().toggleChecked()}>Toggle</button>

<Checkbox.RootProvider value={checkbox}>
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control><Checkbox.Indicator>x</Checkbox.Indicator></Checkbox.Control>
  <Checkbox.HiddenInput />
</Checkbox.RootProvider>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`checked`	—	`false \| true \| "indeterminate"` The checked state of the checkbox
`defaultChecked`	—	`false \| true \| "indeterminate"` The checked state of the checkbox when it is first rendered. Use this when you do not need to control the state of the checkbox.
`disabled`	—	`false \| true` Whether the checkbox is disabled
`form`	—	`string` The id of the form that the checkbox belongs to.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; hiddenInput: string; control: string; label: string; }>` The ids of the elements in the checkbox. Useful for composition.
`invalid`	—	`false \| true` Whether the checkbox is invalid
`name`	—	`string` The name of the input field in a checkbox. Useful for form submission.
`readOnly`	—	`false \| true` Whether the checkbox is read-only
`required`	—	`false \| true` Whether the checkbox is required
`value`	`"on"`	`string` The value of checkbox input. Useful for form submission.

Emit	Event
`checkedChange`	`[details: CheckedChangeDetails]` The callback invoked when the checked state changes.
`update:checked`	`[checked: CheckedState]`

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Group

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`	—	`string[]` The initial value of `value` when uncontrolled
`disabled`	—	`false \| true` If `true`, the checkbox group is disabled
`invalid`	—	`false \| true` If `true`, the checkbox group is invalid
`modelValue`	—	`string[]` The controlled value of the checkbox group
`name`	—	`string` The name of the input fields in the checkbox group (Useful for form submission).
`readOnly`	—	`false \| true` If `true`, the checkbox group is read-only

HiddenInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`indeterminate`	—	`false \| true`

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`checked`	—	`false \| true \| "indeterminate"` The checked state of the checkbox
`defaultChecked`	—	`false \| true \| "indeterminate"` The checked state of the checkbox when it is first rendered. Use this when you do not need to control the state of the checkbox.
`disabled`	—	`false \| true` Whether the checkbox is disabled
`form`	—	`string` The id of the form that the checkbox belongs to.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; hiddenInput: string; control: string; label: string; }>` The ids of the elements in the checkbox. Useful for composition.
`invalid`	—	`false \| true` Whether the checkbox is invalid
`name`	—	`string` The name of the input field in a checkbox. Useful for form submission.
`onCheckedChange`	—	`(details: checkbox.CheckedChangeDetails) => void` The callback invoked when the checked state changes.
`readOnly`	—	`false \| true` Whether the checkbox is read-only
`required`	—	`false \| true` Whether the checkbox is required
`value`	`"on"`	`string` The value of checkbox input. Useful for form submission.

Context

Prop	Default	Type
`children*`	—	`(context: UseCheckboxContext) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Group

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`	—	`string[]` The initial value of `value` when uncontrolled
`disabled`	—	`false \| true` If `true`, the checkbox group is disabled
`invalid`	—	`false \| true` If `true`, the checkbox group is invalid
`name`	—	`string` The name of the input fields in the checkbox group (Useful for form submission).
`onValueChange`	—	`(value: string[]) => void` The callback to call when the value changes
`readOnly`	—	`false \| true` If `true`, the checkbox group is read-only
`value`	—	`string[]` The controlled value of the checkbox group

HiddenInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`indeterminate`	—	`false \| true`

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseCheckboxReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js272.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`checked`	—	`false \| true \| "indeterminate"` The checked state of the checkbox
`defaultChecked`	—	`false \| true \| "indeterminate"` The checked state of the checkbox when it is first rendered. Use this when you do not need to control the state of the checkbox.
`disabled`	—	`false \| true` Whether the checkbox is disabled
`form`	—	`string` The id of the form that the checkbox belongs to.
`ids`	—	`Partial<{ root: string; hiddenInput: string; control: string; label: string; }>` The ids of the elements in the checkbox. Useful for composition.
`invalid`	—	`false \| true` Whether the checkbox is invalid
`name`	—	`string` The name of the input field in a checkbox. Useful for form submission.
`onCheckedChange`	—	`(details: CheckedChangeDetails) => void` The callback invoked when the checked state changes.
`readOnly`	—	`false \| true` Whether the checkbox is read-only
`required`	—	`false \| true` Whether the checkbox is required
`value`	`"on"`	`string` The value of checkbox input. Useful for form submission.

Context

Prop	Default	Type
`children*`	—	`(context: UseCheckboxContext) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js272.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Group

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js272.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`	—	`string[] \| solid_js272.Accessor<string[]>` The initial value of `value` when uncontrolled
`disabled`	—	`false \| true` If `true`, the checkbox group is disabled
`invalid`	—	`false \| true` If `true`, the checkbox group is invalid
`name`	—	`string` The name of the input fields in the checkbox group (Useful for form submission).
`onValueChange`	—	`(value: string[]) => void` The callback to call when the value changes
`readOnly`	—	`false \| true` If `true`, the checkbox group is read-only
`value`	—	`solid_js272.Accessor<string[]>` The controlled value of the checkbox group

HiddenInput

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js272.JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js272.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`indeterminate`	—	`false \| true`

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js272.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseCheckboxReturn`
`asChild`	—	`(props: (userProps?: solid_js272.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>`
`checked`	—	`false \| true \| "indeterminate"` The checked state of the checkbox
`children`	—	`Snippet<[]> \| undefined`
`defaultChecked`	—	`false \| true \| "indeterminate"`
`disabled`	—	`false \| true` Whether the checkbox is disabled
`form`	—	`string` The id of the form that the checkbox belongs to.
`id`	—	`string`
`ids`	—	`Partial<{ root: string; hiddenInput: string; control: string; label: string; }>` The ids of the elements in the checkbox. Useful for composition.
`invalid`	—	`false \| true` Whether the checkbox is invalid
`name`	—	`string` The name of the input field in a checkbox. Useful for form submission.
`onCheckedChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").CheckboxCheckedChangeDetails) => void` The callback invoked when the checked state changes.
`readOnly`	—	`false \| true` Whether the checkbox is read-only
`required`	—	`false \| true` Whether the checkbox is required
`value`	`"on"`	`string` The value of checkbox input. Useful for form submission.

Context

Prop	Default	Type
`render`	—	`Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/index").UseCheckboxReturn]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Group

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`defaultValue`	—	`string[]` The initial value of `value` when uncontrolled
`disabled`	—	`false \| true` If `true`, the checkbox group is disabled
`invalid`	—	`false \| true` If `true`, the checkbox group is invalid
`name`	—	`string` The name of the input fields in the checkbox group (Useful for form submission).
`onValueChange`	—	`(value: string[]) => void` The callback to call when the value changes
`readOnly`	—	`false \| true` If `true`, the checkbox group is read-only
`value`	—	`string[]` The controlled value of the checkbox group

GroupProvider

No serializable props or emits are declared for this part.

HiddenInput

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Indicator

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`indeterminate`	—	`false \| true`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

Provider

No serializable props or emits are declared for this part.

RootProvider

Prop	Default	Type
`value*`	—	`UseCheckboxReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`