Demos#
Unchecked Switch#
<Switch label="Switch" onChange={console.log} />
Checked Switch#
<Switch label="Label" labelPosition="left" checked onChange={({ checked }) => console.log(checked)} />
Checked Switch with error message#
Error message
<Switch label="Switch" checked status="Error message" />
Switch with suffix#
<Switch label="Switch" checked suffix={<HelpButton title="Modal Title">Modal content</HelpButton>} />
Switch in different sizes#
As for now, there are two sizes. medium is the default size.
<Switch size="medium" label="Medium" right="large" checked /> <Switch size="large" label="Large" right="large" checked /> <Switch size="large" label="Large" />
Switch in disabled state#
<Switch disabled label="Unchecked" right="large" /> <Switch checked disabled label="Checked" /> <Section surface="dark" innerSpace top> <Switch disabled label="Unchecked on dark" right="large" /> <Switch checked disabled label="Checked on dark" /> </Section>