Form Radio

import React from "react";
import { FormRadio } from "shards-react";

export default class FormRadioExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedFruit: null
    };

    this.changeFruit = this.changeFruit.bind(this);
  }

  changeFruit(fruit) {
    this.setState({
      selectedFruit: fruit
    });
  }

  render() {
    return (
      <div>
        <p className="mb-2">Select your favorite fruit:</p>
        <FormRadio
          name="fruit"
          checked={this.state.selectedFruit === "orange"}
          onChange={() => {
            this.changeFruit("orange");
          }}
        >
          Orange
        </FormRadio>
        <FormRadio
          name="fruit"
          checked={this.state.selectedFruit === "lemon"}
          onChange={() => {
            this.changeFruit("lemon");
          }}
        >
          Lemon
        </FormRadio>
        <FormRadio
          name="fruit"
          checked={this.state.selectedFruit === "kiwi"}
          onChange={() => {
            this.changeFruit("kiwi");
          }}
        >
          Kiwi
        </FormRadio>
        <span>
          <strong>Selected fruit:</strong>{" "}
          <span>{this.state.selectedFruit || "none"}</span>
        </span>
      </div>
    );
  }
}

import React from "react";
import { FormRadio } from "shards-react";

export default class FormRadioExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedSport: null
    };

    this.changeSport = this.changeSport.bind(this);
  }

  changeSport(sport) {
    this.setState({
      selectedSport: sport
    });
  }

  render() {
    return (
      <div>
        <div>
          <p className="mb-2">Select your favorite sport:</p>
          <FormRadio
            inline
            name="sport"
            checked={this.state.selectedSport === "basketball"}
            onChange={() => {
              this.changeSport("basketball");
            }}
          >
            Basketball
          </FormRadio>
          <FormRadio
            inline
            name="sport"
            checked={this.state.selectedSport === "football"}
            onChange={() => {
              this.changeSport("football");
            }}
          >
            Football
          </FormRadio>
          <FormRadio
            inline
            name="sport"
            checked={this.state.selectedSport === "tennis"}
            onChange={() => {
              this.changeSport("tennis");
            }}
          >
            Tennis
          </FormRadio>
        </div>
        <span>
          <strong>Selected sport:</strong>{" "}
          <span>{this.state.selectedSport || "none"}</span>
        </span>
      </div>
    );
  }
}