Toggle

A two-state button that can be either on or off.

<Toggle.root id="toggle-italic" class="DemoToggle" aria-label="Toggle italic">
  <svg
    width="15"
    height="15"
    viewBox="0 0 15 15"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
  >
    <path
      d="M5.67494 3.50001C5.67494 3.27615 5.85646 3.09463 6.08032 3.09463H10.4197C10.6435 3.09463 10.8251 3.27615 10.8251 3.50001C10.8251 3.72387 10.6435 3.90539 10.4197 3.90539H8.56935L6.23062 11.0946H7.9197C8.14355 11.0946 8.32508 11.2762 8.32508 11.5C8.32508 11.7239 8.14355 11.9054 7.9197 11.9054H3.58032C3.35646 11.9054 3.17494 11.7239 3.17494 11.5C3.17494 11.2762 3.35646 11.0946 3.58032 11.0946H5.43066L7.76939 3.90539H6.08032C5.85646 3.90539 5.67494 3.72387 5.67494 3.50001Z"
      fill="currentColor"
      fill-rule="evenodd"
      clip-rule="evenodd"
    >
    </path>
  </svg>
</Toggle.root>

/* reset */
button {
	all: unset;
}

.DemoToggle {
	background-color: white;
	color: var(--mauve-11);
	height: 35px;
	width: 35px;
	border-radius: 4px;
	display: flex;
	font-size: 15px;
	line-height: 1;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px var(--black-a7);
}
.DemoToggle:hover {
	background-color: var(--violet-3);
}
.DemoToggle[data-state="on"] {
	background-color: var(--violet-6);
	color: var(--violet-12);
}
.DemoToggle:focus {
	box-shadow: 0 0 0 2px black;
}

• Full keyboard navigation.

• Can be controlled via `pressed` and `on_pressed_change` LiveView events.

Anatomy

Import the component.

<Toggle.root />

Anatomy

Root: The toggle button.

API Reference

Root

The toggle.

Prop	Type	Default
`disabled`	`boolean`	`false`
`id`	`string`	`—`
`on_pressed_change`	`string`	`nil`
`pressed`	`boolean`	`false`

disabled

Type boolean Default false

id

Type string Default —

on_pressed_change

Type string Default nil

pressed

Type boolean Default false

Data attributes

Attribute	Values	Description
`[data-state]`	`on \| off`	Present when pressed or not.
`[data-disabled]`	`Present when disabled`	Present when the toggle is disabled.

Accessibility

Adheres to the Button WAI-ARIA pattern.

Keyboard Interactions

Key	Description
`Space`	Activates/deactivates the toggle.
`Enter`	Activates/deactivates the toggle.