Collection of theme-ui and external components.
Theme UI
created:3/15/2021
updated:3/15/2021
source lines:36
comments %:33

Toggle

@component-controls/components
3.4.5

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

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

Octicons

Name
Description
Default
ReactSwitchProps (16 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. @param checked @param event @param id

(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
-
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
-
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)

package
imports
peer
react
^17.0.1
forwardRefRefFC
*
ReactSwitchReactSwitchProps
theme-ui
^0.6.0-alpha.7
jsxTextLabel

Stories

Overview

Label

Custom Icons

Checkbox