Skip to main content


As defined by the W3C:

A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time. Some implementations may initialize the set with all buttons in the unchecked state in order to force the user to check one of the buttons before moving past a certain point in the workflow.

While any DOM content is permissible as a child of the radiogroup, only fast-radio's and slotted content with a role of radio will receive keyboard support.


import {    provideFASTDesignSystem,    fastRadio,    fastRadioGroup} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastRadio(),        fastRadioGroup()    );


Live Editor
SyntaxError: Unexpected token (1:8)
1 : return ()

Create your own design#

import { RadioGroup, radioGroupTemplate as template } from "@microsoft/fast-foundation";import { radioGroupStyles as styles } from "./my-radio-group.styles";
export const myRadioGroup = RadioGroup.compose({    baseName: "radio-group",    template,    styles,});

Additional resources#