Toggle provide users with different selection and activation tools.
install | yarn add @clayui/form |
---|
version |  |
---|
use | import {ClayToggle} from '@clayui/form'; |
---|
In order to create a controlled Toggle
you need to provide the toggled
and onToggle
props.
You can also have custom icons that further signal the current state of the Toggle by providing a symbol
prop.
import {Provider} from '@clayui/core';
import {ClayToggle} from '@clayui/form';
import React from 'react';
export default function App() {
const [toggled1, setToggle1] = React.useState(false);
const [toggled2, setToggle2] = React.useState(false);
const [toggled3, setToggle3] = React.useState(false);
return (
<Provider spritemap="/icons.svg">
<div
className="p-4"
style={{display: 'flex', justifyContent: 'space-around'}}
>
<ClayToggle label="Checkbox" onToggle={setToggle1} toggled={toggled1} />
<ClayToggle
label="with symbol"
onToggle={setToggle2}
symbol={{
off: 'times',
on: 'check',
}}
toggled={toggled2}
/>
<ClayToggle
disabled
label="Disabled"
onToggle={setToggle3}
toggled={toggled3}
/>
</div>
</Provider>
);
}
Inside ClayRadioGroup
If you want the Toggle to behave like a radio element (toggling one on will toggle others off) wrap multiple Toggles
with a ClayRadioGroup component.
import {Provider} from '@clayui/core';
import {ClayRadioGroup, ClayToggle} from '@clayui/form';
import React from 'react';
export default function App() {
const [value, setValue] = React.useState('foo');
return (
<Provider spritemap="/icons.svg">
<div className="p-4">
<ClayRadioGroup
onSelectedValueChange={setValue}
selectedValue={value}
style={{display: 'flex', justifyContent: 'space-around'}}
>
<ClayToggle label="Foo" value="foo" />
<ClayToggle label="Bar" value="bar" />
<ClayToggle label="Baz" value="baz" />
</ClayRadioGroup>
</div>
</Provider>
);
}
Sizing
The attribute sizing="sm"
can be used to create a smaller toggle switch.
import {Provider} from '@clayui/core';
import {ClayToggle} from '@clayui/form';
import React from 'react';
export default function App() {
const [toggled1, setToggle1] = React.useState(false);
const [toggled2, setToggle2] = React.useState(false);
const [toggled3, setToggle3] = React.useState(false);
return (
<Provider spritemap="/icons.svg">
<div className="p-4">
<div className="form-group">
<ClayToggle
label="Checkbox"
onToggle={setToggle1}
sizing="sm"
toggled={toggled1}
/>
</div>
<div className="form-group">
<ClayToggle
label="with symbol"
onToggle={setToggle2}
sizing="sm"
symbol={{
off: 'times',
on: 'check',
}}
toggled={toggled2}
/>
</div>
<div className="form-group">
<ClayToggle
disabled
label="Disabled"
onToggle={setToggle3}
sizing="sm"
toggled={toggled3}
/>
</div>
</div>
</Provider>
);
}
API Reference
Toggle
React.ForwardRefExoticComponent<IToggleProps & React.RefAttributes<HTMLLabelElement>>
Parameters
Properties
containerProps
React.HTMLAttributes<HTMLSpanElement> | undefined
disabled
boolean | undefined
label
React.ReactText | undefined
onToggle
((val: boolean) => void) | undefined
sizing
string | undefined
spritemap
string | undefined
symbol
{ on: string; off: string; } | undefined
toggled
boolean | undefined
type
"checkbox" | "radio" | undefined
Returns
ReactElement<any, string | JSXElementConstructor<any>> | nullEdit this page on GitHubContributors
Matuzalém Teles, Bryce Osterhaus, Krešimir Čoko, Patrick Yeo
Last edited May 11, 2025 at 5:57:01 PM