Socket
Socket
Sign inDemoInstall

@leafygreen-ui/checkbox

Package Overview
Dependencies
97
Maintainers
5
Versions
84
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/checkbox

LeafyGreen UI Kit Checkbox


Version published
Maintainers
5
Weekly downloads
43,457
increased by34.64%

Weekly downloads

Readme

Source

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

PropTypeDescriptionDefault
darkModebooleanDetermines whether or not the Checkbox will appear in dark mode.false
checkedbooleanChecks the checkboxfalse
labelnodeThe label for the checkbox.''
descriptionstringA description for the checkbox.''
disabledbooleanDisables the checkbox.false
indeterminatebooleanSets 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
classNamestringAdds a className to the outermost element.''
animatebooleanDetermines 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
idstring or numberAdds an ID only to the input, and it's used elsewhere for accessibility props.randomly generated string
onChangefunctionThe event handler function for the onChange event. Receives the associated event object as the first argument.() => {}
boldbooleanDetermines whether the text will be bold or not. (Currently disregarded in the new design)false
aria-labelledbystringA value for aria-labelledby. Allows use of the component with an external <label> element
aria-labelstringA value for aria-label. Allows use of the component without a label
...native input attributesAny other props will be spread on the root input element

Any other properties will be spread on the input element.

FAQs

Last updated on 26 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc