![]() * 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
|
||
---|---|---|
.. | ||
Radio.js | ||
RadioButton.js | ||
RadioGroup.js | ||
config.css | ||
index.d.ts | ||
index.js | ||
readme.md | ||
theme.css |
readme.md
Radio buttons
Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Otherwise, consider a dropdown, which uses less space than displaying all options. They should always be used along with RadioGroup
.
You can provide the theme for this component using the key ToolboxButton
import { RadioGroup, RadioButton } from 'react-toolbox/lib/radio';
class RadioTest extends React.Component {
state = {
value: 'vvendetta'
};
handleChange = (value) => {
this.setState({value});
};
render () {
return (
<RadioGroup name='comic' value={this.state.value} onChange={this.handleChange}>
<RadioButton label='The Walking Dead' value='thewalkingdead'/>
<RadioButton label='From Hell' value='fromhell' disabled/>
<RadioButton label='V for a Vendetta' value='vvendetta'/>
<RadioButton label='Watchmen' value='watchmen'/>
</RadioGroup>
);
}
}
Radio Group
A radio selector is mean to get a value from a set of choices, that's why a radio group is needed. It can take some properties and actions that will be transferred to the children, but they also can behave independently.
Properties
Name | Type | Default | Description |
---|---|---|---|
className |
String |
'' |
Set a class to give custom styles to the group. |
disabled |
Boolean |
false |
If true, the group will be displayed as disabled. |
name |
String |
Name for the input element group. | |
onChange |
Function |
Callback function that will be invoked when the value changes. | |
value |
Any |
Default value selected in the radio group. |
Radio Button
The inner component to compose radio selectors. They will be rendered as radio input elements of HTML transferring the given properties that concerns to them.
Properties
Name | Type | Default | Description |
---|---|---|---|
checked |
Boolean |
false |
If true, the input element will be selected by default. Transferred from the parent. |
className |
String |
'' |
Set a class to give custom styles to the radio button. |
disabled |
Boolean |
false |
If true, the item will be displayed as disabled. |
label |
String of node |
'' |
Label for the radio button. |
name |
String |
Name for the input element. | |
onBlur |
Function |
Callback function that will be invoked when the input is blurred. | |
onChange |
Function |
Callback function that will be invoked when the value changes. | |
onFocus |
Function |
Callback function that will be invoked when the input is focused. | |
value |
Any |
Value for the radio button. |
Theming
Name | Description |
---|---|
disabled |
Added to the root of the Radio in case it's disabled. |
field |
Used as the root class of the component. |
input |
Used for the input element. |
radio |
Used to for the radio element. |
radioChecked |
Used for the radio element when it's checked. |
ripple |
To provide styles for the ripple. |
text |
Used to style the text label element. |