@rmwc/switch NPM | npm.io

14.3.3 • Published 22 days ago

Install

Weekly downloads

6,207

License

MIT

Repository

Last release

22 days ago

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}
      onClick={(evt) => setChecked((c) => !c)}
      label="Cookies"
    />
  );
}

<Switch>Icecream</Switch>

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

Switch

A Switch component.

Props

Name	Type	Description
`checked`	`boolean`	Toggle the control on and off.
`disabled`	`boolean`	Disables the control.
`foundationRef`	`Ref<MDCSwitchFoundation<>>`	Advanced: A reference to the MDCFoundation.
`id`	`string`	A DOM ID for the toggle.
`inputRef`	`Ref<HTMLInputElement<>>`	A reference to the native input.
`label`	`ReactNode`	A label for the control.
`processing`	`boolean`
`ripple`	`RipplePropT`	Adds a ripple effect to the component
`rootProps`	`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.

@material/switch @rmwc/base @rmwc/formfield @rmwc/ripple @rmwc/toggleable @rmwc/types

oevtestpluginswitch @everything-registry/sub-chunk-784 @webiny/ui @zalastax/nolb-_rm rmwc react-material-site ui-react-material tutorbook webiny-ui @bento-editor/core @rmwc/data-table @map-colonies/react-core

22 days ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

2 months ago

2 months ago

1 month ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

10 months ago

1 year ago

11 months ago

1 year ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

1 year ago

10 months ago

10 months ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago