@asphalt-react/toggle-switch

ToggleSwitch

Toggle Switch 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 your users will interact with. There are two sizes available - medium & large. Apply the boolean on prop to switch it on or off.

Accessibility

• recieves focus from tab keys
• toggles state using enter and space keys - takes care of necessary aria-attributes
• 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 toggle switch

type	required	default
bool	true	N/A

onToggle

Callback to be called every time when user toggle a switch. 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

size

Size of the toggle switch. Possible values are m, l for medium & large

type	required	default
enum	false	"m"