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 |
