Toggle Switch

View in Lexicon

Toggle provide users with different selection and activation tools.

installyarn add @clayui/form
versionNPM Version
useimport {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.

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.

Sizing

The attribute sizing="sm" can be used to create a smaller toggle switch.

API Reference

Toggle

React.ForwardRefExoticComponent<IToggleProps & React.RefAttributes<HTMLLabelElement>>
Parameters
Properties

containerProps

React.HTMLAttributes<HTMLSpanElement> | undefined

disabled

boolean | undefined

id

string | 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

value

string | undefined
Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub

Contributors

Matuzalém Teles, Bryce Osterhaus, Krešimir Čoko, Patrick Yeo

Last edited May 11, 2025 at 5:57:01 PM