| 1 | @# Checkbox
|
| 2 |
|
| 3 | A checkbox allows the user to toggle between checked, unchecked, and (rarely)
|
| 4 | indeterminate states.
|
| 5 |
|
| 6 | @reactExample CheckboxExample
|
| 7 |
|
| 8 | @## Props
|
| 9 |
|
| 10 | Use the `checked` prop instead of `value` in controlled mode to avoid typings
|
| 11 | issues. Enable the `indeterminate` prop for a third in-between state.
|
| 12 |
|
| 13 | ```tsx
|
| 14 | // simple usage for string labels
|
| 15 | <Checkbox checked={this.state.isEnabled} label="Enabled" onChange={this.handleEnabledChange} />
|
| 16 |
|
| 17 | // advanced usage for JSX content
|
| 18 | <Checkbox checked={this.state.isEnabled} onChange={this.handleEnabledChange}>
|
| 19 | <Icon icon="user" />
|
| 20 | Gilad <strong>Gray</strong>
|
| 21 | </Checkbox>
|
| 22 | ```
|
| 23 |
|
| 24 | This component supports the full range of HTML `<input>` props. The most common
|
| 25 | options are detailed below.
|
| 26 |
|
| 27 | @interface ICheckboxProps
|
| 28 |
|
| 29 | @## CSS
|
| 30 |
|
| 31 | Blueprint's custom checkboxes use an extra `.@ns-control-indicator` element
|
| 32 | after the `<input>` to achieve their custom styling. You should then wrap the
|
| 33 | whole thing in a `<label>` with the classes `.@ns-control.@ns-checkbox`.
|
| 34 |
|
| 35 | Note that attribute modifiers (`:checked`, `:disabled`) are applied on the
|
| 36 | internal `<input>` element. Further note that `:indeterminate` can only be set
|
| 37 | via JavaScript (the `Checkbox` React component supports it handily with a prop).
|
| 38 |
|
| 39 | @css checkbox
|