Switch

Toggle switch with spring-animated thumb, press stretch feedback, and error/success states.

forms v0.1.0

Playground

Examples

States

<cg-stack gap="sm"><cg-switch label="Notifications"></cg-switch><cg-switch label="Dark mode" checked></cg-switch><cg-switch label="Disabled" disabled></cg-switch></cg-stack>

Validation

<cg-stack gap="sm"><cg-switch label="Error" error checked></cg-switch><cg-switch label="Success" success checked></cg-switch><cg-switch label="Loading" loading></cg-switch></cg-stack>

Import

import { CgSwitch } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-switch';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`label`	string	""	Label text
`checked`	boolean	false	On/off state
`disabled`	boolean	false	Disabled state
`error`	boolean	false	Error state
`success`	boolean	false	Success state
`loading`	boolean	false	Loading state

Events

Event	Detail	Description
`cg-change`	{checked: boolean}	When toggled on/off