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.
import { component$, useStyles$ } from '@builder.io/qwik';
import { Toggle } from '@qwik-ui/headless';
import styles from '../snippets/toggle.css?inline';
export default component$(() => {
useStyles$(styles);
return (
<div class="toggle-container">
<Toggle class="toggle">Hello</Toggle>
</div>
);
});
✨ 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.
import { component$, useStyles$ } from '@builder.io/qwik';
import { Toggle } from '@qwik-ui/headless';
import styles from '../snippets/toggle.css?inline';
export default component$(() => {
useStyles$(styles);
return (
<div class="toggle-container">
<Toggle pressed={true} class="toggle">
Hello
</Toggle>
</div>
);
});
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
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
import { Toggle } from '@qwik-ui/headless';
import styles from '../snippets/toggle.css?inline';
export default component$(() => {
useStyles$(styles);
const text = useSignal('Unpress me');
return (
<div class="toggle-container container-center">
<Toggle
pressed
onPressedChange$={(p) =>
p ? (text.value = 'Unpress me') : (text.value = 'Press me')
}
class="toggle"
>
Hello
</Toggle>
<span>{text.value}</span>
</div>
);
});
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
import { component$, useComputed$, useSignal, useStyles$ } from '@builder.io/qwik';
import { Toggle } from '@qwik-ui/headless';
import styles from '../snippets/toggle.css?inline';
export default component$(() => {
useStyles$(styles);
const pressedState = useSignal(true);
const text = useComputed$(() => {
return pressedState.value ? 'You pressed me' : 'You unpressed me';
});
return (
<div class="toggle-container container-center">
<Toggle bind:pressed={pressedState} class="toggle">
Hello
</Toggle>
<span>{text.value}</span>
<button
style={{ border: '1px solid black', padding: '10px' }}
onClick$={() => (pressedState.value = true)}
>
I can only press
</button>
</div>
);
});
Disabled
Pass the disabled
prop.
import { component$, useStyles$ } from '@builder.io/qwik';
import { Toggle } from '@qwik-ui/headless';
import styles from '../snippets/toggle.css?inline';
export default component$(() => {
useStyles$(styles);
return (
<div class="toggle-container">
<Toggle disabled class="toggle">
Hello
</Toggle>
</div>
);
});
Accessibility
Keyboard interaction
Key | Description |
---|---|
Space | |
Enter |
API
Prop | Type | Description |
---|---|---|
pressed | boolean | Initial value to make the pressed state uncontrolled. Use in conjunction with `onPressedChange$` to have some reactivity. |
onPressedChange$ | function PropFunction<() => void> | 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. |