Radios View Source



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 = [
1
  {
2
    value: "1",
3
    label: (
4
      <React.Fragment>
5
        <strong>Option one</strong>
6
        <br />I want to have cake and soda for breakfast.
7
      </React.Fragment>
8
    ),
9
  },
10
  {
11
    value: "2",
12
    label: (
13
      <React.Fragment>
14
        <strong>Option two</strong>
15
        <br />I want to have cake and soda for lunch.
16
      </React.Fragment>
17
    ),
18
  },
19
  {
20
    value: "3",
21
    label: (
22
      <React.Fragment>
23
        <strong>Option three</strong>
24
        <br />I want to have cake and soda for dinner.
25
      </React.Fragment>
26
    ),
27
  },
28
];

Declare the RadioGroup component.

0
class ExampleOne extends React.Component {
1
  state = { ExampleOne: "2" };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <RadioGroup
8
        name="ExampleOne"
9
        options={RADIO_GROUP_OPTIONS}
10
        selected={this.state.ExampleOne}
11
        onChange={this._handleChange}
12
      />
13
    );
14
  }
15
}


Output






Accepted React Properties



RadioGroup
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
name
string
null
Input name
label
string
null
Label text
description
string
null
Description text
tooltip
string
null
Tooltip text
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source