An accessible toggle switch component built on Radix UI with spring layout physics and full customization.
Made by AxylAccessible Radix 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/19/2026
Toggle between light and dark visual aesthetics.