HIG Checkbox


1422432.1.09 months ago3 years agoMinified + gzip package size for @hig/checkbox in KB



Checkboxes provide a control to select from a list of non-exclusive options.

Read more about when and how to use the Checkbox component on the website.

Getting started

Install the package

yarn add @hig/checkbox @hig/theme-context @hig/theme-data

Import the component

import Checkbox from '@hig/checkbox';

Basic usage

<Checkbox />


Use the className prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Checkbox also has a stylesheet prop that accepts a function wherein you can modify its styles. For instance

import Checkbox from '@hig/checkbox';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    checkboxWrapper: {
      color: themeData["colorScheme.status.error"]
    checkboxInput: {
      opacity: 1
    checkboxCheck: {
      padding: `4px`
    checkboxCheckWrapper: {
      position: `static`
    checkboxIndeterminate: {
      margin: `10px`

  return (
    <Checkbox stylesheet={customStylesheet} />

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.