@rmwc/switch

Switches

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.

• Module @rmwc/switch
• Import styles:
  • import '@material/switch/dist/mdc.switch.css';
  • import '@material/form-field/dist/mdc.form-field.css';
• MDC Docs: https://material.io/develop/web/components/input-controls/switches/

Switches are identical in function to the Checkbox component, they just present a different UI / UX paradigm.

import { Switch } from '@rmwc/switch';

{/* Controlled with change handler */}
<Switch
  checked={!!this.state.cookiesChecked}
  onChange={evt => this.setState({cookiesChecked: evt.target.checked})}>
  Cookies
</Switch>

{/* Uncontrolled Switch */}
<Switch defaultChecked>Pizza</Switch>

{/* Using the label prop */}
<Switch label="Icecream" />

{/* Disabled */}
<Switch disabled label="Disabled" />

import { DocumentComponent } from '@rmwc/base/utils/document-component';
import * as docs from './docgen.json';

<DocumentComponent docs={docs} displayName="Switch" />

Changelog

4.0.5 (2019-01-06)

Bug Fixes

• Typescript: Correcting types (20dec9c3)