Toggle

Accessible toggle button (aria-pressed) — for on/off controls like a formatting button or a favourite.

Native <button> keyboard; the content pops on press (inspired by melt-next's spring-scaled toggle icon).

Actions · two-way: bind:pressed · submits in a form with name · keyboard contract

<script lang="ts">
	import { Toggle } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
pressed bind:	boolean	false	Whether it is on (aria-pressed).
disabled	boolean	false	Blocks toggling.
class	string	—	Merged with the component's own classes, last — so yours win.
name	string	—	Submits with the form under this name while pressed.
value	string	'on'	The submitted value.
onPressedChange	(pressed: boolean) => void	—	Fires with the new state on every toggle.
children required	Snippet	—	The content.

Everything not listed above is spread onto the underlying element (HTMLButtonAttributes): aria-*, data-*, event handlers, and the rest of the native attributes.

Keyboard

Key	Does
Enter / Space	toggle pressed state

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Toggle bind:pressed={bold} aria-label="Bold"><Bold /></Toggle>
<Toggle aria-label="Italic"><Italic /></Toggle>
<Toggle aria-label="Underline"><Underline /></Toggle>

Actions · Button · ButtonGroup · CopyButton · Menu · ContextMenu

---

← All components · Getting started · Theming · source