ButtonGroup

Controlled

Provide the checked prop and an onChange handler to create a controlled component.

() => {
  class MyForm extends Component {
    constructor(props) {
      super(props);

      this.state = {
        checked: 0
      };

      this.handleChange = this.handleChange.bind(this);
      this.resetDefaultSelected = this.resetDefaultSelected.bind(this);
    }

    handleChange(event) {
      this.setState({
        checked: parseInt(event.target.getAttribute('data-index'))
      });
    }

    resetDefaultSelected() {
      this.setState({
        checked: 0
      });
    }

    render() {
      return (
        <DemoLayout>
          <ButtonGroup
            aria-label="Align text"
            checked={this.state.checked}
            onChange={this.handleChange}
            mode="radio">
            <Button>Left</Button>
            <Button>Center</Button>
            <Button>Right</Button>
          </ButtonGroup>
          <Button minimal size="small" onClick={this.resetDefaultSelected}>Reset to Default Alignment</Button>
        </DemoLayout>
      );
    }
  }

  return <MyForm />;
}