@leafygreen-ui/checkbox
LeafyGreen UI Kit Checkbox
Last updated 2 months ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/checkbox 
SYNC missed versions from official npm registry.

Checkbox

npm (scoped)

View on Storybook

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. ''
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. ''
bold boolean Determines whether the text will be bold or not. false
animate boolean Determines whether the checkbox will be animated when checked or unchecked. 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. () => {}
... native input attributes Any other props will be spread on the root input element

Any other properties will be spread on the input element.

Current Tags

  • 6.0.2                                ...           latest (2 months ago)

26 Versions

  • 6.0.2                                ...           2 months ago
  • 6.0.1                                ...           3 months ago
  • 6.0.0                                ...           3 months ago
  • 5.0.0                                ...           4 months ago
  • 4.1.1                                ...           5 months ago
  • 4.1.0                                ...           5 months ago
  • 4.0.4                                ...           5 months ago
  • 4.0.3                                ...           5 months ago
  • 4.0.2                                ...           6 months ago
  • 4.0.1                                ...           9 months ago
  • 4.0.0                                ...           a year ago
  • 3.2.1                                ...           a year ago
  • 3.2.0                                ...           a year ago
  • 3.1.6                                ...           a year ago
  • 3.1.5                                ...           a year ago
  • 3.1.4                                ...           a year ago
  • 3.1.3                                ...           a year ago
  • 3.1.2                                ...           2 years ago
  • 3.1.1                                ...           2 years ago
  • 3.1.0                                ...           2 years ago
  • 3.0.2                                ...           2 years ago
  • 3.0.1                                ...           2 years ago
  • 3.0.0                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 39
Dependencies (1)
Dev Dependencies (1)

Copyright 2014 - 2017 © taobao.org |