RMWC
14.3.5 arrow_drop_down

Checkboxes

Checkboxes allow the user to select multiple options from a set.
Controlled
function Example() {
  const [checked, setChecked] = React.useState(false);
  return (
    <Checkbox
      label="Cookies"
      checked={checked}
      onChange={(evt) => setChecked(!!evt.currentTarget.checked)}
    />
  );
}
Uncontrolled
<Checkbox label="Pizza" />
Label as Child
<Checkbox>Icecream</Checkbox>
States
<>
  <Checkbox label="Broccoli" indeterminate />

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

Checkbox

A Checkbox component.

Props

NameTypeDescription
checkedbooleanToggle the control on and off.
disabledbooleanDisables the control.
foundationRefRef<MDCCheckboxFoundation<>>Advanced: A reference to the MDCFoundation.
idstringA DOM ID for the toggle.
indeterminatebooleanMake the control indeterminate
inputRefRef<HTMLInputElement<>>A reference to the native input.
labelReactNodeA label for the control.
rippleRipplePropTAdds a ripple effect to the component
rootPropsHTMLProps<any>By default, all props except className and style spread to the input. These are additional props for the root of the checkbox.
valuestring | number | string[]The value of the control.
Themes
  • Baseline
  • Crane
  • Fortnightly
  • Miami
  • Dark
  • Theme your App!
    Place this tag around the root of your App, or anywhere you want to apply a custom theme.

    import { ThemeProvider } from 'rmwc/Theme';

    <ThemeProvider options={{
      primary: '#6200ee',
      secondary: '#03dac4',
      error: '#b00020',
      background: '#fff',
      surface: '#fff',
      onPrimary: 'rgba(255, 255, 255, 1)',
      onSecondary: 'rgba(0, 0, 0, 0.87)',
      onSurface: 'rgba(0, 0, 0, 0.87)',
      onError: '#fff',
      textPrimaryOnBackground: 'rgba(0, 0, 0, 0.87)',
      textSecondaryOnBackground: 'rgba(0, 0, 0, 0.54)',
      textHintOnBackground: 'rgba(0, 0, 0, 0.38)',
      textDisabledOnBackground: 'rgba(0, 0, 0, 0.38)',
      textIconOnBackground: 'rgba(0, 0, 0, 0.38)',
      textPrimaryOnLight: 'rgba(0, 0, 0, 0.87)',
      textSecondaryOnLight: 'rgba(0, 0, 0, 0.54)',
      textHintOnLight: 'rgba(0, 0, 0, 0.38)',
      textDisabledOnLight: 'rgba(0, 0, 0, 0.38)',
      textIconOnLight: 'rgba(0, 0, 0, 0.38)',
      textPrimaryOnDark: 'white',
      textSecondaryOnDark: 'rgba(255, 255, 255, 0.7)',
      textHintOnDark: 'rgba(255, 255, 255, 0.5)',
      textDisabledOnDark: 'rgba(255, 255, 255, 0.5)',
      textIconOnDark: 'rgba(255, 255, 255, 0.5)'
    }}>
      <App />
    </ThemeProvider >