The Radio component is used when you require a user to select only one value in a series of options.
Imports
Import React and the RadioGroup Component.
0
import * as React from "react";
1
import { RadioGroup } from "slate-react-system";
Usage
Define the radio group values and labels.
0
const RADIO_GROUP_OPTIONS = [
5
<strong>Option one</strong>
6
<br />I want to have cake and soda for breakfast.
14
<strong>Option two</strong>
15
<br />I want to have cake and soda for lunch.
23
<strong>Option three</strong>
24
<br />I want to have cake and soda for dinner.
Declare the RadioGroup component.
0
class ExampleOne extends React.Component {
1
state = { ExampleOne: "2" };
3
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
9
options={RADIO_GROUP_OPTIONS}
10
selected={this.state.ExampleOne}
11
onChange={this._handleChange}
Output
Accepted React Properties
NameTypeDefaultDescription
onChange
function
null
Function called upon an onChange event
selected
boolean
false
The value that is currently selected. Can be used to assign default values as well
options
Array
[]
An array of options, each of which has a value and a label
label
string
null
Label text
description
string
null
Description text
tooltip
string
null
Tooltip text