@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:
  • Using CSS Loader
    • import '@rmwc/switch/styles';
  • Or include stylesheets
    • '@material/switch/dist/mdc.switch.css'
    • '@material/form-field/dist/mdc.form-field.css'
    • '@material/ripple/dist/mdc.ripple.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.

<Switch defaultChecked label="Pizza" />

function Example() {
  const [checked, setChecked] = React.useState(false);

  return (
    <Switch
      checked={checked}
      onChange={evt => setChecked(!!evt.currentTarget.checked)}
      label="Cookies"
    />
  );
}

<Switch>Icecream</Switch>

<>
  <Switch disabled label="Disabled" />
  <Switch disabled defaultChecked label="Disabled" />
</>

Switch

A Switch component.

Props

Name	Type	Description
checked	undefined | false | true	Toggle the control on and off.
disabled	undefined | false | true	Disables the control.
foundationRef	React.Ref<MDCSwitchFoundation>	Advanced: A reference to the MDCFoundation.
id	undefined | string	A DOM ID for the toggle.
inputRef	React.Ref<HTMLInputElement>	A reference to the native input.
label	React.ReactNode	A label for the control.
ripple	RipplePropT	Adds a ripple effect to the component
rootProps	React.HTMLProps<any>	By default, all props except className and style spread to the input. These are additional props for the root of the checkbox.
value	string | number | string[]	The value of the control.

Changelog

6.1.4 (2020-09-11)

Build System / Dependencies

• deps: bump elliptic from 6.5.2 to 6.5.3 (0e5d097b)

New Features

• Tab: Add ability to set focusOnActivate (ab155a96)

Bug Fixes

• Select:
  • added the "sudden removal" story (616ee47f)
  • fixed unhandled error on "sudden" item removal (b34c0b47)
• base:
  • Properly pass foundation in useFoundation effect (cd556bc3)
  • Use local foundation reference in useFoundation effect (b9fdc94c)
  • Re-set apiRef in useFoundation after nulling it (748bdf35)
• Tab: activeTabIndex always updating automatically (ed0f0091)

Other Changes

• remove not use deps from externals (e03ed26a)

Tests

• Select: Story for enhanced Select with Portal (e882c13a)
• Menu: Show index in hoistToBody story (b0600e28)