Checkbox

An independent yes / no choice.

Show demo games Autoplay allowed Some markets forbid autoplay. All markets Locked

checkbox.example.svelte

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

<div class="example-stack">
  <Checkbox label="Show demo games" checked />
  <Checkbox
    label="Autoplay allowed"
    description="Some markets forbid autoplay."
  />
  <Checkbox label="All markets" indeterminate />
  <Checkbox label="Locked" disabled />
</div>

Usage

Do

Use it for independent options and for consent.

Don’t

Do not use it for an instant on / off setting; use Switch.

Accessibility

A native checkbox inside its label.
indeterminate shows a dash for a partly checked group.

Keyboard

Checkbox keyboard interactions
Keys	Action
`Space`	Toggle
`Tab, Shift+Tab`	Move focus in and out

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Checkbox props
Prop	Type	Default	Description
`checked`	`boolean`	`false`	Bindable in Svelte; `defaultChecked` in React.
`description`	`string`	—
`disabled`	`boolean`	`false`
`indeterminate`	`boolean`	`false`	Shows a dash: some, not all, of a group is checked.
`label` *required	`string`	—
`name`	`string`	—
`onCheckedChange`	`(checked: boolean) => void`	—
`value`	`string`	—	Bindable in Svelte; `defaultValue` in React.