react-toolbox-build4server
Version:
Builds react-toolbox in such a way that it's components can be required and used in node - most likely for server-side rendered webapps - without having to depend on webpack to build your entire server-side project
62 lines (49 loc) • 3.33 kB
Markdown
# Radio buttons
[Radio buttons](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button) 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`.
<!-- example -->
```jsx
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.
| 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. |
This component has state to keep the currently selected value and that's why it exposes to methods to work from the code with it:
- `getValue` used to retrieve the currently selected value.
- `setValue` used to set a new value.
## 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.
| 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` | `''` | 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. |