office-ui-fabric-react/lib/components/ChoiceGroup/examples/ChoiceGroup.Label.Example.js

Reusable React components for building experiences for Office 365.

import * as React from 'react';
import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
import { Label } from 'office-ui-fabric-react/lib/Label';
import { useId } from '@uifabric/react-hooks';
export var ChoiceGroupLabelExample = function () {
    // Use the useId() hook to ensure that the label ID is unique on the page. Notes:
    // - It's also okay to use a plain string and manually ensure its uniqueness.
    // - In a function component, we get the ID with the useId() hook so that it will stay the same.
    //   (In a class, you'd create the ID in the constructor with getId and save it in a private member.)
    var labelId = useId('labelElement');
    return (React.createElement("div", null,
        React.createElement(Label, { id: labelId, required: true }, "Custom label"),
        React.createElement(ChoiceGroup, { defaultSelectedKey: "B", options: [
                {
                    key: 'A',
                    text: 'Option A'
                },
                {
                    key: 'B',
                    text: 'Option B'
                },
                {
                    key: 'C',
                    text: 'Option C',
                    disabled: true
                },
                {
                    key: 'D',
                    text: 'Option D'
                }
            ], onChange: _onChange, ariaLabelledBy: labelId })));
};
function _onChange(ev, option) {
    console.dir(option);
}
//# sourceMappingURL=ChoiceGroup.Label.Example.js.map