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 | boolean | Toggle the control on and off. | | disabled | boolean | Disables the control. | | foundationRef | Ref<MDCCheckboxFoundation<>> | Advanced: A reference to the MDCFoundation. | | id | string | A DOM ID for the toggle. | | indeterminate | boolean | Make the control indeterminate | | inputRef | Ref<HTMLInputElement<>> | A reference to the native input. | | label | ReactNode | A label for the control. | | 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. |