Actions and forms

Checkbox

Boolean selection with a visible native control.

Live example

Include draftsShow unpublished notes.Unavailable option

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Checkbox } from "@cofob/design-system-react";

/**
 * Complete Checkbox parameter reference.
 * @param checked/defaultChecked
 *   type: boolean; controlled or initial state
 *   default: —
 *   example: true
 * @param indeterminate
 *   type: boolean
 *   default: false
 *   example: true
 * @param label
 *   type: string | renderable content
 *   default: —
 *   example: "Accessible label"
 * @param description
 *   type: string | renderable content
 *   default: —
 *   example: "Supporting context for this control."
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param input attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function CheckboxExample() {
  return (
    <Checkbox label="Include drafts" />
  );
}

Svelte

<script lang="ts">
  import { Checkbox } from "@cofob/design-system-svelte";

  // Complete Checkbox parameter reference.
  // checked/defaultChecked
  //   type: boolean; controlled or initial state
  //   default: —
  //   example: true
  // indeterminate
  //   type: boolean
  //   default: false
  //   example: true
  // label
  //   type: string | renderable content
  //   default: —
  //   example: "Accessible label"
  // description
  //   type: string | renderable content
  //   default: —
  //   example: "Supporting context for this control."
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // input attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Checkbox label="Include drafts" bind:checked />

HTML

<!--
  Complete Checkbox parameter reference.
  checked/defaultChecked
    type: boolean; controlled or initial state
    default: —
    example: true
  indeterminate
    type: boolean
    default: false
    example: true
  label
    type: string | renderable content
    default: —
    example: "Accessible label"
  description
    type: string | renderable content
    default: —
    example: "Supporting context for this control."
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  input attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<label class="cf-checkbox"><input type="checkbox" /> Include drafts</label>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-checkbox`
Adapters	Native · React · Svelte
Primary props	checked/defaultChecked · indeterminate · label · description · size · children · input attributes
Documented states	unchecked · checked · indeterminate · disabled
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`checked/defaultChecked`	`boolean; controlled or initial state`	`—`	React · Svelte · HTML	`true`	Use checked/bind:checked for controlled state or defaultChecked for initial state.
`indeterminate`	`boolean`	`false`	React · Svelte · HTML	`true`	Displays a mixed checkbox state without changing its submitted value.
`label`	`string \| renderable content`	`—`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`description`	`string \| renderable content`	`—`	React · Svelte · HTML	`"Supporting context for this control."`	Supporting explanatory content.
`size`	`"sm" \| "md" \| "lg" (plus heading sizes)`	`"md"`	React · Svelte · HTML	`"md"`	Applies a design-system size token.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`input attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.