Checkbox

Checkbox supports checked, unchecked, and indeterminate states, and groups via CheckboxGroup. Built on Ark UI checkbox, sourced from Shark UI.

Accept terms and conditionsSubscribe to the newsletter

Accept terms and conditions Subscribe to the newsletter

// apps/docs/src/components/examples/checkbox/default/react.tsx
import { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel } from '@cloudvoyant/helical-react';
import { Check } from 'lucide-react';

export default function ReactCheckboxDefault() {
  return (
    <div className="flex flex-col gap-4">
      <Checkbox defaultChecked>
        <CheckboxControl>
          <CheckboxIndicator>
            <Check />
          </CheckboxIndicator>
        </CheckboxControl>
        <CheckboxLabel>Accept terms and conditions</CheckboxLabel>
      </Checkbox>
      <Checkbox>
        <CheckboxControl>
          <CheckboxIndicator>
            <Check />
          </CheckboxIndicator>
        </CheckboxControl>
        <CheckboxLabel>Subscribe to the newsletter</CheckboxLabel>
      </Checkbox>
    </div>
  );
}

<!-- apps/docs/src/components/examples/checkbox/default/svelte.svelte -->
<script lang="ts">
  import { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel } from '@cloudvoyant/helical-svelte';
  import { Check } from 'lucide-svelte';
</script>

<div class="flex flex-col gap-4">
  <Checkbox defaultChecked>
    <CheckboxControl>
      <CheckboxIndicator>
        <Check />
      </CheckboxIndicator>
    </CheckboxControl>
    <CheckboxLabel>Accept terms and conditions</CheckboxLabel>
  </Checkbox>
  <Checkbox>
    <CheckboxControl>
      <CheckboxIndicator>
        <Check />
      </CheckboxIndicator>
    </CheckboxControl>
    <CheckboxLabel>Subscribe to the newsletter</CheckboxLabel>
  </Checkbox>
</div>

API Reference

Checkbox

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Box size.

Also accepts all Ark CheckboxRoot props (checked, defaultChecked, indeterminate, onCheckedChange, disabled, …).

CheckboxControl / CheckboxIndicator / CheckboxLabel / CheckboxGroup

Accept all corresponding Ark props plus className/class. Supply the check glyph as CheckboxIndicator children.

Accessibility

Ark sets role="checkbox" on the control with aria-checked (true/false/mixed) and a visually-hidden native input. Keyboard: Space toggles.

Theming

No theme extension — uses --primary, --input, --ring, --destructive.