UNPKG

carbon-components

Version:

Carbon Components is a component library for IBM Cloud

55 lines (37 loc) 2.05 kB
### Javascript #### Public Methods | Name | Params | Description | |-----------|-------------------------------|-----------------------------------------------------------------------------------------------------------------------| | setState | state: `String` ['true', 'false', 'mixed'] | Can be used to set the checkbox to `true`(checked), `false`(unchecked) or `mixed` (indeterminate) | | setDisabled | state: `Boolean` | Can be used to set the checkbox to disabled, needed for the `label > input` | #### Options | Option | Default Selector | Description | |---------------------|------------------------------------------------|--| | selectorInit | .bx--checkbox | The CSS selector to find checkbox | ### FAQ #### Two ways to write checkbox HTML Checkbox HTML can be written in two ways: With `input` and `label` as siblings ```html <div class="bx--form-item"> <input id="bx--checkbox" class="bx--checkbox" type="checkbox" value="green" name="checkbox"> <label for="bx--checkbox" class="bx--checkbox-label"> Checkbox (input + label) </label> </div> ``` With `label` wrapping `input` ```html <div class="bx--form-item"> <label class="bx--checkbox-label"> <input class="bx--checkbox" type="checkbox" value="yellow" name="checkbox"> Checkbox (label > input) </label> </div> ``` Note: You no longer need to include a SVG for the checkmark to render. #### Fieldset and Legend As a best practice, groups of checkboxes should make use of `<fieldset>` and `<legend>` (see Form for details). This is especially true for forms submitting data. But, there are exceptions to the rule. For example, Data Tables make use of checkboxes as a way to select rows of data. Checkboxes in this context would represent an entire row of data in its associated table row.