@hig/checkbox

    2.1.0 • Public • Published

    Checkbox

    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 />

    Styling

    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) => ({
        ...styles,
        checkboxWrapper: {
          ...styles.checkboxWrapper,
          color: themeData["colorScheme.status.error"]
        },
        checkboxInput: {
          ...styles.checkboxInput,
          opacity: 1
        },
        checkboxCheck: {
          ...styles.checkboxCheck,
          padding: `4px`
        },
        checkboxCheckWrapper: {
          ...styles.checkboxCheckWrapper,
          position: `static`
        },
        checkboxIndeterminate: {
          ...styles.checkboxIndeterminate,
          margin: `10px`
        }
      });
    
      return (
        <Checkbox stylesheet={customStylesheet} />
      );
    }

    Keywords

    none

    Install

    npm i @hig/checkbox

    DownloadsWeekly Downloads

    145

    Version

    2.1.0

    License

    Apache-2.0

    Unpacked Size

    82.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • devfoncy
    • hig-bot
    • nfiniteset
    • wmui51
    • staceyshk
    • sherm.newsom
    • grantkellyadsk