@leafygreen-ui/checkbox
    TypeScript icon, indicating that this package has built-in type declarations

    9.0.0 • Public • Published

    Checkbox

    npm (scoped)

    View on MongoDB.design

    Installation

    Yarn

    yarn add @leafygreen-ui/checkbox

    NPM

    npm install @leafygreen-ui/checkbox

    Example

    import Checkbox from '@leafygreen-ui/checkbox';
    
    <Checkbox
      className="my-checkbox"
      onChange={event => {
        /* Something to handle the click event */
      }}
      label="This is how you enable a thing"
      checked={true}
      bold={false}
    />;

    Output HTML

    <label
      class="css-1rgbgdt my-checkbox"
      title="Create an item"
      for="checkbox-14827892"
    >
      <input
        checked
        type="checkbox"
        role="checkbox"
        class="css-32kjhsdaf"
        id="checkbox-14827892"
        name="checkbox-14827892"
        aria-disabled="false"
        aria-checked="true"
        aria-labeledby="checkbox-14827892-label"
      />
    
      <div class="css-34kjkdfg">
        <div class="css-98sdfjsad"></div>
      </div>
    
      <span class="css-8xdsjfh9" id="checkbox-14827892-label">
        This is how you enable a thing
      </span>
    </label>

    Properties

    Prop Type Description Default
    darkMode boolean Determines whether or not the Checkbox will appear in dark mode. false
    checked boolean Checks the checkbox false
    label node The label for the checkbox. ''
    description string A description for the checkbox. ''
    disabled boolean Disables the checkbox. false
    indeterminate boolean Sets the checkbox as indeterminate. NOTE: the checkbox will become out of sync with the indeterminate prop when it's clicked. Make sure to unset the indeterminate prop on change where you're controlling your input. false
    className string Adds a className to the outermost element. ''
    animate boolean Determines whether the checkbox will be animated when checked or unchecked. Note the "ripple" animation will only run when Checkbox is rendered within LeafygreenProvider, and only on click. true
    id string or number Adds an ID only to the input, and it's used elsewhere for accessibility props. randomly generated string
    onChange function The event handler function for the onChange event. Receives the associated event object as the first argument. () => {}
    bold boolean Determines whether the text will be bold or not. (Currently disregarded in the new design) false
    aria-labelledby string A value for aria-labelledby. Allows use of the component with an external <label> element
    aria-label string A value for aria-label. Allows use of the component without a label
    ... native input attributes Any other props will be spread on the root input element

    Any other properties will be spread on the input element.

    Keywords

    none

    Install

    npm i @leafygreen-ui/checkbox

    DownloadsWeekly Downloads

    3,796

    Version

    9.0.0

    License

    Apache-2.0

    Unpacked Size

    404 kB

    Total Files

    46

    Last publish

    Collaborators

    • shaneeza
    • hswolff
    • dave.mccarthy
    • thesonofthomp