Toggle

Displays a boolean value.

Default

Code Editor
() => {
const [checked, setChecked] = useState(false)
const [checked2, setChecked2] = useState(true)
return (
<Container>
<Container>
<Toggle checked={checked} onChange={() => setChecked(!checked)} />
</Container>
<Container>
<Toggle checked={checked2} onChange={() => setChecked2(!checked2)} />
</Container>
</Container>
)
}

Disabled

Code Editor
<Container>
<Container>
<Toggle disabled />
</Container>
<Container>
<Toggle disabled checked />
</Container>
</Container>

Sizes

Code Editor
<Container row>
<Container>
<Toggle />
</Container>
<Container>
<Toggle size="large" />
</Container>
</Container>