Toggle

example

code

import { Toggle } from 'charcell/react';

export function ToggleExample() {
  return <Toggle label="autopilot" defaultPressed />;
}

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

<template>
  <Toggle label="autopilot" defaultPressed />
</template>

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

<Toggle label="autopilot" defaultPressed />

<label class="CharcellToggle CharcellToggle--boxed"
  ><input
    class="CharcellToggle__input"
    type="checkbox"
    checked
  />autopilot</label
>

import { Toggle } from 'charcell/react';

export function ToggleExample() {
  return <Toggle label="autopilot" variant="dense" defaultPressed />;
}

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

<template>
  <Toggle label="autopilot" variant="dense" defaultPressed />
</template>

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

<Toggle label="autopilot" variant="dense" defaultPressed />

<label class="CharcellToggle"
  ><input
    class="CharcellToggle__input"
    type="checkbox"
    checked
  />autopilot</label
>

import { Toggle } from 'charcell/react';

export function ToggleExample() {
  return <Toggle label="autopilot" defaultPressed={false} />;
}

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

<template>
  <Toggle label="autopilot" :defaultPressed="false" />
</template>

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

<Toggle label="autopilot" defaultPressed={false} />

<label class="CharcellToggle CharcellToggle--boxed"
  ><input class="CharcellToggle__input" type="checkbox" />autopilot</label
>

import { Toggle } from 'charcell/react';

export function ToggleExample() {
  return <Toggle label="autopilot" defaultPressed disabled />;
}

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

<template>
  <Toggle label="autopilot" defaultPressed disabled />
</template>

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

<Toggle label="autopilot" defaultPressed disabled />

<label class="CharcellToggle CharcellToggle--boxed"
  ><input
    class="CharcellToggle__input"
    type="checkbox"
    disabled
    checked
  />autopilot</label
>

as text

at rest

┌───────────┐
│ autopilot │
└───────────┘

hover

┌───────────┐
│ autopilot │
└───────────┘

focus

┌───────────┐
│❯autopilot │
└───────────┘

props

labelstring: The toggle's text.
variant'boxed' | 'dense'= 'boxed': boxed draws the ring around the label, three rows tall, which meets WCAG 2.5.8; dense is one bare row.
pressedboolean: Controlled pressed state (pair with onPressedChange).; binds with v-model:pressed in vue, bind:pressed in svelte
defaultPressedboolean: Uncontrolled initial state - the native checkbox owns it from there.
disabledboolean: Disables the hidden checkbox; the label rests at mid.
namestring: The form field name.
valuestring: The value the form submits while the toggle is pressed.
idstring: The hidden checkbox's id, for a label elsewhere to point at.
onPressedChange(pressed: boolean) => void: Called with the new pressed state.

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.

usage

example

code

as text

props

slots