@rmwc/checkbox

Checkboxes

Checkboxes allow the user to select multiple options from a set.

• Module @rmwc/checkbox
• Import styles:
  • Using CSS Loader
    • import '@rmwc/checkbox/styles';
  • Or include stylesheets
    • '@material/checkbox/dist/mdc.checkbox.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/checkboxes/

function Example() {
  const [checked, setChecked] = React.useState(false);
  return (
    <Checkbox
      label="Cookies"
      checked={checked}
      onChange={evt => setChecked(!!evt.currentTarget.checked)}
    />
  );
}

<Checkbox label="Pizza" />

<Checkbox>Icecream</Checkbox>

<>
  <Checkbox label="Broccoli" indeterminate />

  <Checkbox label="Always On" checked />
  <Checkbox label="Always Off" checked={false} />
</>

Checkbox

A Checkbox 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<MDCCheckboxFoundation>	Advanced: A reference to the MDCFoundation.
id	undefined | string	A DOM ID for the toggle.
indeterminate	undefined | false | true	Make the control indeterminate
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)