Toggle · Starbase

Playground

size

An on/off switch with chunky pixel corners and stepped motion. It exposes a checked property and fires change, so Datastar can bind to it like a native checkbox.

Examples

Basic

<sb-toggle label="Warp drive"></sb-toggle>
<sb-toggle label="Shields" checked></sb-toggle>
<sb-toggle label="Self-destruct" disabled></sb-toggle>

Sizes

<sb-toggle size="sm" checked></sb-toggle>
<sb-toggle size="md" checked></sb-toggle>
<sb-toggle size="lg" checked></sb-toggle>

Two-way binding

Bind the checked property with data-bind and the __prop and __event modifiers.

<div data-signals:_thrusters="false">
  <sb-toggle label="Thrusters" data-bind:_thrusters__prop.checked__event.change></sb-toggle>
  <p data-text="$_thrusters ? 'Thrusters engaged' : 'Thrusters idle'"></p>
</div>

Accessibility

The switch is a <button role="switch"> with aria-checked, so it is focusable and toggles with Space and Enter. Give it a label. Without one it is announced as "Toggle".

Installation

Add Datastar with Rocket and the Starbase autoloader once per page, then use the tag. The autoloader imports each component the first time its tag appears, including tags added later by a Datastar morph.

<!-- Once per page: Datastar with Rocket, and the Starbase autoloader.
     It loads every <sb-…> component the first time its tag appears. -->
<script type="importmap">
  { "imports": { "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar-rocket.js" } }
</script>
<script type="module" src="https://rocket.libretto.ch/c/autoloader.js"></script>
<!-- Optional, no flash of undefined elements: class="sb-cloak" on <html>, and -->
<style>.sb-cloak :not(:defined) { visibility: hidden }</style>

<sb-toggle checked size="lg"></sb-toggle>

<!-- Or skip the autoloader and load just this component: -->
<!-- <script type="module" src="https://rocket.libretto.ch/c/toggle/toggle.js"></script> -->

API reference

Props

Attribute	Type	Default	Description
`checked`	boolean	`false`	Initial state. Read the live state from the checked property.
`disabled`	boolean	`false`	Disable interaction.
`label`	string	`""`	Visible label next to the switch.
`size`	"sm" \| "md" \| "lg"	`"md"`	Size of the switch.

Events

Name	Description
`change`	After the user flips the switch.
`sb-change`	Same moment. detail: { checked }.