Collection of theme-ui and external components.
created:3/15/2021
updated:3/15/2021
source lines:71
comments %:0

Switch

theme-ui
0.6.0-alpha.7

Form switch component

Switch variants can be defined in

theme.forms
and the component uses the
theme.forms.switch
variant by default.

Component

import { Switch } from 'theme-ui';

Overview

({
label,
checked: propChecked,
}) => {
const [checked, setChecked] = useState(propChecked);
return (
<Switch
label={label}
checked={checked}
onChange={() => setChecked(!checked)}
/>
);
}

Controls

Name
Description
Default
Controls
SwitchProps (1 properties)
label
string
-
InputHTMLAttributes (1 properties)

Properties

Name
Description
Default
BoxOwnProps (4 properties)
as
ElementType<any>
-
variant
string
-
css
Interpolation<any>
-
sx
ThemeUIStyleObject
-
SpaceProps (28 properties)
SwitchProps (1 properties)
InputHTMLAttributes (34 properties)
HTMLAttributes (43 properties)
OpacityProps (1 properties)
AriaAttributes (48 properties)
DOMAttributes (160 properties)
Attributes (1 properties)
BackgroundColorProps (2 properties)
RefAttributes (1 properties)

External dependencies

package
imports
peer
react
React

Internal dependencies

file
imports
"./Box"
"./Label"

Component JSX

<Box
/>
Box
from"./Box"