@rmwc/switch
TypeScript icon, indicating that this package has built-in type declarations

14.3.5 • Public • Published

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.

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.

Dependencies (6)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @rmwc/switch

    Weekly Downloads

    6,017

    Version

    14.3.5

    License

    MIT

    Unpacked Size

    11.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • jamesmfriedman