Skip to content

react-component/switch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

146 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

Watchers

Forks

Packages

 
 
 

Contributors