81acda7162
* Add postcss-next postcss-include and reporter
* Add stylelint
* Add CSS colors
* Add CSS custom media queries
* Use dashes for CSS colors
* Add base CSS variables
* Remove AppBar SASS dependency from spec page
* Migrate AppBar style to PostCSS
* Migrate Avatar style to PostCSS
* Migrate Ripple style to PostCSS
* Remove unneeded media CSS import in Avatar
* Add shadows to CSS variables
* Migrate Button style to PostCSS
* Update webpack test config and linting from npm
* Migrate Input style to PostCSS
* Add missing input config variables for Dropdown and Autocomplete
* Migrate Chip style to PostCSS
* Migrate Autocomplete style to PostCSS
* Migrate Dropdown style to PostCSS
* Migrate animations to PostCSS
* Migrate Card style to PostCSS
* Migrate Checkbox style to PostCSS
* Migrate DataPicker style to PostCSS
* Migrate Dialog style to PostCSS
* Migrate Drawer style to PostCSS
* Add postcss-mixins and postcss-each
* Migrate Layout style to PostCSS
* Fix bug in button theme
* Bugfix in avatar css
* Add some missing nesting notations
* Migrate Link style to PostCSS
* Migrate List style to PostCSS
* Migrate Menu style to PostCSS
* Migrate Navigation style to PostCSS
* Migrate Overlay style to PostCSS
* Migrate ProgressBar style to PostCSS
* Migrate Radio style to PostCSS
* Migrate Slider style to PostCSS
* Migrate Snackbar style to PostCSS
* Migrate Switch style to PostCSS
* Migrate Table style to PostCSS
* Migrate Tabs style to PostCSS
* Migrate TimePicker to PostCSS
* Migrate Tooltip styles to PostCSS
* Update webpack config for testing and tests
* Migrate commons to PostCSS
* Remove sass from main project
* Bye from docs to sass
* Build with CSS
* Remove unneded deps for sass in docs subproject
* Fix tests
* use 4p shadow in AppBar as spec indicates
* Fixed typo in list/config.css
* Fix tests
* Fix linter errors
* Latest build
* Release 2.0.0-beta.0
* Remove sass lint
* fixes old sass var in css config
* Update linter
* New Table implementation
* Fix old sass var in list/config.css
See
|
||
---|---|---|
.. | ||
Check.js | ||
Checkbox.js | ||
config.css | ||
index.d.ts | ||
index.js | ||
readme.md | ||
theme.css |
readme.md
Checkbox
Checkboxes allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
import Checkbox from 'react-toolbox/lib/checkbox';
class TestCheckbox extends React.Component {
state = { check1: true, check2: false };
handleChange = (field, value) => {
this.setState({...this.state, [field]: value});
};
render () {
return (
<div>
<Checkbox
checked={this.state.check1}
label="Checked option"
onChange={this.handleChange.bind(this, 'check1')}
/>
<Checkbox
checked={this.state.check2}
label="Unchecked option"
onChange={this.handleChange.bind(this, 'check2')}
/>
<Checkbox
checked
disabled
label="Disabled checkbox"
/>
</div>
);
}
}
If you want to provide a theme via context, the component key is RTCheckbox
.
Properties
Name | Type | Default | Description |
---|---|---|---|
checked |
Boolean |
false |
Value for the checkbox, can be true or false . |
children |
String , Element or Array |
Children to pass through the component. | |
className |
String |
'' |
Sets a class to give customized styles to the checkbox field. |
disabled |
Boolean |
false |
If true, the checkbox shown as disabled and cannot be modified. |
label |
String of node |
Text label to attach next to the checkbox element. | |
name |
String |
false |
The name of the field to set in the input checkbox. |
onBlur |
Function |
Callback called when the checkbox is blurred. | |
onChange |
Function |
Callback called when the checkbox value is changed. | |
onFocus |
Function |
Callback called when the checkbox is focused |
Theme
Name | Description |
---|---|
check |
Used as root in the check element. |
checked |
Used for the check element when it's checked. |
disabled |
Used when the component is disabled. |
field |
Used as the root class of the component. |
input |
Used for the input element. |
ripple |
Used for the ripple component. |
text |
Used for the text label. |