Ecme - The Ultimate Next & TypeScript Web Template

Switcher

Switcher component used as an alternative of the single Checkbox, it can be switch between enabled or disabled.

Basic example for Switcher.

Switcher can have different content on state enabled or disabled

Set disabled to true to disable the Switcher.

We can set isLoading prop to true and make Switcher status to pending.

We can apply custom color to Switcher via switcherClass prop.

Controlled example.

Prop	Description	Type	Default
checked	Whether the Switcher is checked	`boolean`	-
checkedContent	Content to be shown when the state is checked	`string` \| `ReactNode`	-
defaultChecked	Whether the Switcher initial state is checked	`boolean`	-
disabled	Whether the Switcher is disabled	`boolean`	-
isLoading	Whether the checkbox is loading	`boolean`	`false`
labelRef	Ref of Checkbox label element	`string`	-
name	The name of the switcher input field	`string`	-
onChange	Callback when Switcher value is changed	`(checked: boolean, e: MouseEvent) => void`	-
readOnly	Whether the Switcher is read only	`boolean`	-
switcherClass	Custom css for Switcher toggled	`string`	-
unCheckedContent	Content to be shown when the state is unchecked	`string` \| `ReactNode`	-