Version: 1.x

fast-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.

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.

Setup

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

provideFASTDesignSystem()
    .register(
        fastRadio(),
        fastRadioGroup()
    );

Usage

Live Editor

<fast-radio-group value="mango" name="favorite-fruit">
    <fast-radio value="apple">Apple</fast-radio>
    <fast-radio value="mango">Mango</fast-radio>
    <fast-radio value="orange">Orange</fast-radio>
</fast-radio-group>

Result

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,
});

API

class: `RadioGroup`

Superclass

Name	Module	Package
`FoundationElement`	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Description	Inherited From
`readOnly`	public	`boolean`	When true, the child radios will be immutable by user interaction. See readonly HTML attribute for more information.
`disabled`	public	`boolean`	Disables the radio group and child radios.
`name`	public	`string`	The name of the radio group. Setting this value will set the name value for all child radio elements.
`value`	public	`string`	The value of the checked radio
`orientation`	public	`Orientation or "horizontal" or "vertical"`	The orientation of the group
`childItems`	public	`HTMLElement[]`
`$presentation`	public	`ComponentPresentation or null`	A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
`template`	public	`ElementViewTemplate or void or null`	Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.	FoundationElement
`styles`	public	`ElementStyles or void or null`	Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.	FoundationElement

Methods

Name	Privacy	Return	Inherited From
`nameChanged`	protected	`void`
`valueChanged`	protected	`void`
`templateChanged`	protected	`void`	FoundationElement
`stylesChanged`	protected	`void`	FoundationElement

Events

Name	Type	Description	Inherited From
`change`		Fires a custom 'change' event when the value changes

Attributes

Name	Field	Inherited From
`readonly`	readOnly
`disabled`	disabled
`name`	name
`value`	value
`orientation`	orientation

CSS Parts

Name	Description
`positioning-region`	The positioning region for laying out the radios

Slots

Name	Description
`label`	The slot for the label
	The default slot for radio buttons

Setup​

Usage​

Create your own design​

API​

class: RadioGroup​

Superclass​

Fields​

Methods​

Events​

Attributes​

CSS Parts​

Slots​

Additional resources​