@asphalt-react/toggle-switch NPM

ToggleSwitch

npm

ToggleSwitch is like a physical switch for your apps. Allows the users to turn things on or off, like a light switch. Toggle Switches are best used for changing the state of system that are immediately observed by the user.

Based on the on or off state, position & color of the thumbtack changes. Thumbtack is the tappable & draggable round disc that users will interact with. Apply the boolean on prop to switch it on or off. ToggleSwitch shows an icon tick to clearly indicate that it's turned on. You can change this icon or opt to not have it at all.

It supports data-* attributes.

Accessibility

receives focus from tab key
toggles state using enter and space keys
ToggleSwitch has a role of “switch”
ToggleSwitch's state determines the value of aria-checked attribute.

Accessibility must-haves

You can use aria-label or aria-labelledby to specify meaningful labels for screen readers

Usage

import { ToggleSwitch } from "@asphalt-react/toggle-switch"

function App() {
const [toggle, setToggle] = React.useState(false)

return (
    <ToggleSwitch on={toggle}  onToggle={({on}) => setToggle(on)}/>
)}

Props

on

Determines state of the ToggleSwitch

type	required	default
bool	true	N/A

onToggle

Callback to be called every time when user toggle a ToggleSwitch. It has 2 parameters: on and event The callback has the argument of the shape

{
   on:  boolean,
   event: React synthetic event,
}

type	required	default
func	true	N/A

icon

Handles the icon in thumbtack.

ToggleSwitch shows tick icon by default. Set icon as "false" to hide the icon. Pass an SVG or SVG wrapped React component to replace the default icon.