Actions and forms

Switch

Immediate boolean setting with switch semantics.

Live example

Enable notificationsReceive updates when a build finishes.Managed by your organization

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 { Switch } from "@cofob/design-system-react";

/**
 * Complete Switch parameter reference.
 * @param checked/defaultChecked
 *   type: boolean; controlled or initial state
 *   default: —
 *   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 SwitchExample() {
  return (
    <Switch label="Dark mode" />
  );
}

Svelte

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

  // Complete Switch parameter reference.
  // checked/defaultChecked
  //   type: boolean; controlled or initial state
  //   default: —
  //   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
  // onCheckedChange
  //   type: (checked: boolean) => void (Svelte)
  //   default: —
  //   example: {handleCheckedChange}
  // input attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Switch label="Dark mode" bind:checked />

HTML

<!--
  Complete Switch parameter reference.
  checked/defaultChecked
    type: boolean; controlled or initial state
    default: —
    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-*
-->
<button class="cf-switch" role="switch" aria-checked="false">Dark mode</button>

<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-switch`
Adapters	Native · React · Svelte
Primary props	checked/defaultChecked · label · description · size · children · onCheckedChange · input attributes
Documented states	unchecked · checked · 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.
`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.
`onCheckedChange`	`(checked: boolean) => void (Svelte)`	`—`	Svelte	`{handleCheckedChange}`	Svelte callback fired after switch state changes.
`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.