An accessible toggle switch component built on Base UI with spring layout physics and full customization.
Made by AxylAccessible Base UI switch with Motion layout spring physics.
Switch with contextual track icons and helper description.
Switch rendered across small (sm), default, and large (lg) size variants.
| Prop | Type | Default |
|---|---|---|
checked? | boolean | - |
defaultChecked? | boolean | false |
onCheckedChange? | (checked: boolean) => void | - |
size? | "sm" | "default" | "lg" | "default" |
label? | ReactNode | - |
description? | ReactNode | - |
labelPosition? | "left" | "right" | "right" |
thumbIcon? | ReactNode | - |
checkedIcon? | ReactNode | - |
uncheckedIcon? | ReactNode | - |
disabled? | boolean | false |
className? | string | - |
thumbClassName? | string | - |
labelClassName? | string | - |
descriptionClassName? | string | - |
Built by Axyl. A motion-first component registry for React.
Last updated: 9/17/2026
Toggle between light and dark visual aesthetics.