Switches toggle the state of a single item on or off. Built on bits-ui's Switch.Root, with a draggable thumb (swipe past a 16px threshold to flip state) in addition to
click/tap.
The Switch component implements the Material Design 3 Switch pattern: a pill-shaped track with a thumb that scales up and shifts color when checked.
Use icons="none" for a plain thumb, or icons="both" to show a check/close icon in both states.
import { Switch } from '@noxlovette/material'; See it live, with Controls, in Storybook rather than a hand-rolled preview here.
Playground
Open the Switch story with Controls for checked, disabled, and icon mode.
Bind checked to read and set the on/off state:
<script lang="ts">
import { Switch } from '@noxlovette/material';
let notifications = $state(true);
</script>
<Switch bind:checked={notifications} /> | Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether the switch is on. Bindable. |
disabled | boolean | false | Disables the switch. |
icons | "checked" | "both" | "none" | "checked" | Which thumb states show an icon: only when checked, both checked/unchecked, or neither. |
checkedIconProps | IconProps | { name: 'check' } | Props for the icon shown inside the thumb when checked. |
uncheckedIconProps | IconProps | { name: 'close' } | Props for the icon shown inside the thumb when unchecked (used only when icons is 'both'). |
Keyboard support
Space/Enter toggles the switch when focused, matching the native role="switch" behaviour from bits-ui.
Drag gesture
Pointer drag past a 16px threshold flips state, mirroring native mobile switch behaviour — purely additive to click support.
State icons
Optional check/close icons give a non-color-dependent signal of on/off state.