Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

DISCLAIMER: This component is in
Beta
status. That means that it is ready for production, but the API might change.

Toggle

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

✨ Features

  • Follows the WAI-Aria design pattern
  • Full keyboard navigation
  • Can open one or multiple items at a time
  • Supports initial and reactive values

Building blocks

import { component$ } from '@builder.io/qwik';
import { Toggle } from '@qwik-ui/headless';

export default component$(() => {
  return <Toggle>Hello</Toggle>;
});

Usage / Component State

Initial Value (Uncontrolled)

An initial, uncontrolled value can be provided using the pressed prop.

If you want to have some control when the toggle is pressed, like making some side effect you can use the onPressedChange$. The event is fired when the user toggle the button, and receives the new value.

Unpress me

Reactive Value (Controlled)

Pass a signal to bind:value prop to make the pressed state controlled (binding the value with a signal).

You pressed me

Disabled

Pass the disabled prop.

Accessibility

Keyboard interaction

Key

Description

Space
Toggles between states.
Enter
Toggles between states.

API

PropTypeDescription
pressed
boolean

Initial value to make the pressed state uncontrolled. Use in conjunction with `onPressedChange$` to have some reactivity.

onPressedChange$
function

Called when the state changes.

bind:pressed
Signal<boolean>

Reactive value (signal) to make the pressed state controlled.

disabled
boolean

Disables the toggle making the toggle unpressable.