react-component/switch

README

@rc-component/switch

_{Part of the Ant Design ecosystem.}

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

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/

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

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

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

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