office-ui-fabric-react/lib/codepen/components/ChoiceGroup/ChoiceGroup.Label.Example.Codepen.txt

Reusable React components for building experiences for Office 365.

let { ChoiceGroup, IChoiceGroupOption, Fabric } = window.Fabric;

interface IChoiceGroupLabelExampleState {
  imageKey: string;
}

class ChoiceGroupLabelExample extends React.Component<{}, IChoiceGroupLabelExampleState> {
  constructor(props: {}) {
    super(props);

    this.state = {
      imageKey: ''
    };
  }

  public render() {
    return (
      <div>
        <div id="labelElement">Here is a custom label</div>
        <ChoiceGroup
          defaultSelectedKey="B"
          options={[
            {
              key: 'A',
              text: 'Option A',
              'data-automation-id': 'auto1'
            } as IChoiceGroupOption,
            {
              key: 'B',
              text: 'Option B'
            },
            {
              key: 'C',
              text: 'Option C',
              disabled: true
            },
            {
              key: 'D',
              text: 'Option D',
              disabled: true
            }
          ]}
          onChange={this._onChange}
          ariaLabelledBy="labelElement"
          required={true}
        />
      </div>
    );
  }

  private _onChange = (ev: React.FormEvent<HTMLInputElement>, option: any): void => {
    console.dir(option);
  };
}

ReactDOM.render(<ChoiceGroupLabelExample />, document.getElementById('content'));