README.md

@rc-component/switch

🔘 Accessible React switch for boolean state with controlled and uncontrolled modes.

Part of the Ant Design ecosystem.

Highlights

• Renders a native button with role="switch" and aria-checked state.
• 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.

Install

npm install @rc-component/switch

Usage

import 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/

API

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.

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

Release

npm run prepublishOnly

prepublishOnly builds the package with Father and publishes through rc-np. Run npm run gh-pages to deploy the dumi site.

License

@rc-component/switch is released under the MIT license.