Checkbox

a checkbox drawn as [×], [ ] or [-]. the mark shows the value, so checking it does not invert it.

usage

scenario

example

code

import { Checkbox } from 'charcell/react';

export function CheckboxExample() {
  return <Checkbox label="ride with the polecats" defaultChecked />;
}

<script setup lang="ts">
import { Checkbox } from 'charcell/vue';
</script>

<template>
  <Checkbox label="ride with the polecats" defaultChecked />
</template>

<script lang="ts">
  import { Checkbox } from 'charcell/svelte';
</script>

<Checkbox label="ride with the polecats" defaultChecked />

<label class="CharcellCheckbox"
  ><input class="CharcellCheckbox__input" type="checkbox" checked /><span
    class="CharcellCheckbox__box"
    aria-hidden="true"
  ></span
  >ride with the polecats</label
>

import { Checkbox } from 'charcell/react';

export function CheckboxExample() {
  return <Checkbox label="ride with the polecats" defaultChecked={false} />;
}

<script setup lang="ts">
import { Checkbox } from 'charcell/vue';
</script>

<template>
  <Checkbox label="ride with the polecats" :defaultChecked="false" />
</template>

<script lang="ts">
  import { Checkbox } from 'charcell/svelte';
</script>

<Checkbox label="ride with the polecats" defaultChecked={false} />

<label class="CharcellCheckbox"
  ><input class="CharcellCheckbox__input" type="checkbox" /><span
    class="CharcellCheckbox__box"
    aria-hidden="true"
  ></span
  >ride with the polecats</label
>

import { Checkbox } from 'charcell/react';

export function CheckboxExample() {
  return (
    <Checkbox label="ride with the polecats" defaultChecked indeterminate />
  );
}

<script setup lang="ts">
import { Checkbox } from 'charcell/vue';
</script>

<template>
  <Checkbox label="ride with the polecats" defaultChecked indeterminate />
</template>

<script lang="ts">
  import { Checkbox } from 'charcell/svelte';
</script>

<Checkbox label="ride with the polecats" defaultChecked indeterminate />

<label class="CharcellCheckbox"
  ><input class="CharcellCheckbox__input" type="checkbox" checked /><span
    class="CharcellCheckbox__box"
    aria-hidden="true"
  ></span
  >ride with the polecats</label
>

import { Checkbox } from 'charcell/react';

export function CheckboxExample() {
  return <Checkbox label="ride with the polecats" defaultChecked disabled />;
}

<script setup lang="ts">
import { Checkbox } from 'charcell/vue';
</script>

<template>
  <Checkbox label="ride with the polecats" defaultChecked disabled />
</template>

<script lang="ts">
  import { Checkbox } from 'charcell/svelte';
</script>

<Checkbox label="ride with the polecats" defaultChecked disabled />

<label class="CharcellCheckbox"
  ><input
    class="CharcellCheckbox__input"
    type="checkbox"
    disabled
    checked
  /><span class="CharcellCheckbox__box" aria-hidden="true"></span>ride with the
  polecats</label
>

as text

at rest

 [×] ride with the polecats

hover

 [×] ride with the polecats

focus

❯[×] ride with the polecats

props

labelstring: The text after the check cell.
checkedboolean: Controlled checked state (pair with onCheckedChange).; binds with v-model:checked in vue, bind:checked in svelte
defaultCheckedboolean: Uncontrolled initial state - the native checkbox owns it from there.
indeterminateboolean: Neither checked nor unchecked, shown as [-]: a box over a set whose members are partly checked. A click clears it.
disabledboolean: Disables the native checkbox; the row rests at mid.
namestring: The form field name.
valuestring: The value the form submits while the box is checked.
idstring: The checkbox's id, for a label elsewhere to point at.
onCheckedChange(checked: boolean) => void: Called with the new checked state on every change.

it also takes any other attribute of its <label>.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

default: Content after label, or the whole label without one.