Radio and Radio Group

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.

fluent-radio and fluent-radio-group

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

Setup

import {
    provideFluentDesignSystem,
    fluentRadio,
    fluentRadioGroup
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentRadio(),
        fluentRadioGroup()
    );

Customize your design

import { RadioGroup, radioGroupTemplate as template } from "@fluentui/fast-foundation";
import { radioGroupStyles as styles } from "./my-radio-group.styles";

export const myRadioGroup = RadioGroup.compose({
    baseName: "radio-group",
    template,
    styles,
});

Example

Please see the Blazor documentation and demo site for more information.

Additional Resources

See also checkbox W3C Component Aria Practices