Skip to content

react-component/switch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

149 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

@rc-component/switch

Ant Design Part of the Ant Design ecosystem.

๐Ÿ”˜ Accessible React switch for boolean state with controlled and uncontrolled modes.

NPM version npm downloads build status Codecov bundle size dumi

English | ็ฎ€ไฝ“ไธญๆ–‡

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.

About

๐Ÿ”˜ Accessible React switch for boolean state with controlled and uncontrolled modes.

Topics

Resources

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.md

Stars

196 stars

Watchers

21 watching

Forks

Packages

 
 
 

Contributors