Part of the Ant Design ecosystem.
🔘 Accessible React switch for boolean state with controlled and uncontrolled modes.
English | 简体中文
- Renders a native button with
role="switch"andaria-checkedstate. - Supports controlled and uncontrolled checked state.
- Handles click and keyboard toggles with left and right arrow keys.
- Provides content class/style slots for checked and unchecked labels.
npm install @rc-component/switchimport Switch from '@rc-component/switch';
import '@rc-component/switch/assets/index.css';
export default () => <Switch checkedChildren="On" unCheckedChildren="Off" />;Online preview: https://switch.react-component.vercel.app/
Run the local dumi site:
npm install
npm startThen open http://localhost:8000.
| Name | Type | Default | Description |
|---|---|---|---|
autoFocus |
boolean | - | Focus the switch on mount. |
checked |
boolean | - | Controlled checked state. |
checkedChildren |
React.ReactNode | - | Content shown when checked. |
className |
string | - | Additional class name. |
classNames |
{ content?: string } |
- | Semantic class names for internal content. |
defaultChecked |
boolean | false | Initial checked state. |
disabled |
boolean | false | Disable interaction. |
loadingIcon |
React.ReactNode | - | Extra loading icon node. |
onChange |
(checked, event) => void |
- | Triggered after checked state changes. |
onClick |
(checked, event) => void |
- | Triggered after click. |
onKeyDown |
React.KeyboardEventHandler | - | Key down handler. |
prefixCls |
string | 'rc-switch' |
Prefix class name. |
style |
React.CSSProperties | - | Root style. |
styles |
{ content?: React.CSSProperties } |
- | Semantic styles for internal content. |
tabIndex |
number | - | Tab index. |
title |
string | - | Native title attribute. |
unCheckedChildren |
React.ReactNode | - | Content shown when unchecked. |
npm install
npm start
npm test
npm run tsc
npm run compile
npm run buildThe dumi site runs at http://localhost:8000 by default.
npm run prepublishOnlyThe release flow is handled by @rc-component/np through the rc-np command after the package build.
@rc-component/switch is released under the MIT license.