A next-generation tool to create blazing-fast documentation sites
API
created:3/5/2021
updated:3/5/2021
loc
37
comments
32%
passed
10
coverage
50%

Toggle

avatar of atanasster
@component-controls/components
3.15.0

Toggle components can be used to edit boolean values. Uses react-switch component.

import { Toggle } from '@component-controls/components';

Overview

Name
Description
Default
ReactSwitchProps(19 properties)
checked

The checked state of the switch. If true, the switch is set to checked. If false, it is not checked.

boolean
false
onChange

Invoked when the user clicks or drags the switch.

checked describes the presumed future state of the checked prop.
event is a native MouseEvent when the handle is clicked or dragged, and a SyntheticEvent at all other times.
id is the ID prop of the switch.
(checked: boolean, event: MouseEvent | SyntheticEvent<MouseEvent | KeyboardEvent, Event>, id: string) => void
-
disabled

When true, the switch will no longer be interactive and its colors will be greyed out.

boolean
-
offColor
The switch will take on this color when it is not checked. Only accepts 3 or 6 digit hex colors, e.g., #888, #45abcd.

Defaults to #888.

string
-
onColor

The switch will take on this color when it is checked. Only accepts 3 or 6 digit hex colors, e.g., #080, #45abcd.

Defaults to #080.

string
-
offHandleColor
The color of the handle of the switch when not checked. Only accepts 3 or 6 digit hex colors, e.g., #fff, #45abcd.

Defaults to #fff.

string
-
onHandleColor

The color of the handle of the switch when checked. Only accepts 3 or 6 digit hex colors, e.g., #fff, #45abcd.

Defaults to #fff.

string
-
handleDiameter

The diameter of the handle, measured in pixels. By default it will be slightly smaller than the height of the switch.

Defaults to undefined.

number
-
uncheckedHandleIcon

Icon to display on the handle while switch is unchecked.

Defaults to undefined.

Element
-
checkedHandleIcon

Icon to display on the handle while switch is checked.

Defaults to undefined.

Element
-
uncheckedIcon
An icon that will be shown on the switch when it is not checked. Set to false to show no icon.

Defaults to an x icon.

booleanElement
-
checkedIcon

An icon that will be shown on the switch when it is checked. Set to false to show no icon.

Defaults to a checked icon.

booleanElement
-
boxShadow

The box-shadow of the handle of the switch.

Defaults to undefined.

string
-
activeBoxShadow
The box-shadow of the handle of the switch when it is active or focused. Do not set this to null as it is important for accessibility.

Defaults to '0px 0px 2px 3px #33bbff'.

string
-
height

The height of the background of the switch, measured in pixels.

Defaults to 28.

number
-
width

The width of the background of the switch, measured in pixels.

Defaults to 56.

number
-
borderRadius
Border radius of the switch and the handle.

Defaults to undefined.

number
-
className

The className of the outer shell of the switch.

Defaults to undefined.

string
-
id

The id of the embedded checkbox.

Defaults to undefined.

string
-
ToggleOwnProps(2 properties)

Commits

Date
Author
Commit Message
4/27/2021

atanasster

avatar of atanasster
fix: toggle default aria-label
12/28/2020

atanasster

avatar of atanasster
feat: custom esm pages
5/14/2020

atanasster

avatar of atanasster
feat: deque's axe-core ally testing plugin
3/21/2020

atanasster

avatar of atanasster
docs: update Toggle component
2/28/2020

atanasster

avatar of atanasster
chore: move to @component-controls/components
5 commits
package
imports
peer
react
^17.0.1
forwardRefRefFC
*
ReactSwitchReactSwitchProps
*
theme-ui
^0.8.4
jsxTextLabel

Stories

Label

Custom Icons

Octicons

Checkbox