ToggleSwitch

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.

Checkout @asphalt-react/iconpack for SVG wrapped React components.

| type | required | default | | ----- | -------- | ------- | | union | false | true |