Toggle Switch

Toggle provide users with different selection and activation tools.

installyarn add @clayui/form
versionNPM Version
useimport {ClayToggle} from '@clayui/form';

Table of Contents

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.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import {ClayToggle} from '@clayui/form';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [toggled1, setToggle1] = useState(false);
	const [toggled2, setToggle2] = useState(false);
	const [toggled3, setToggle3] = useState(false);

	return (
		<Provider spritemap="/public/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.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import {ClayRadioGroup, ClayToggle} from '@clayui/form';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [value, setValue] = useState('foo');

	return (
		<Provider spritemap="/public/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.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import {ClayToggle} from '@clayui/form';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [toggled1, setToggle1] = useState(false);
	const [toggled2, setToggle2] = useState(false);
	const [toggled3, setToggle3] = useState(false);

	return (
		<Provider spritemap="/public/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

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

Table of Contents