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
FluentRadio and FluentRadioGroup
While any DOM content is permissible as a child of the radiogroup, only <FluentRadio>'s and slotted content with a role of radio will receive keyboard support.
<FluentRadio> and <FluentRadioGroup> wrap the <fluent-radio> and <fluent-radio-group> elements, web component implementations of a radio and radio group leveraging the Fluent UI design system.
Usage
@using Microsoft.Fast.Components.FluentUI
<FluentRadioGroup Name="numbers">
<label slot="label">
Numbers
</label>
<FluentRadio Value="one">One</FluentRadio>
<FluentRadio Value="two">Two</FluentRadio>
</FluentRadioGroup>
Example
See the component in action with implementation examples at the Blazor demo site.