Skip to main content
Version: 1.x

fast-radio

An implementation of a radio as a form-connected web-component.

Setup​

Basic Setup​

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

provideFASTDesignSystem()
    .register(
        fastRadio()
    );

Customizing the indicator​

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

provideFASTDesignSystem()
    .register(
        fastRadio({
            checkedIndicator: `...your checked indicator...`
        })
    );

Usage​

Live Editor
<div role="radiogroup" aria-labelledby="fruit" name="favorite-fruit">
    <h3 id="fruit">Favorite fruit:</h3>
    <fast-radio value="apple">Apple</fast-radio>
    <fast-radio value="mango">Mango</fast-radio>
    <fast-radio value="orange">Orange</fast-radio>
</div>
Result
Loading...
note

For a more ergonomic usage of radios in groups, see the fast-radio-group documentation.

Create your own design​

import {
    Radio,
    RadioOptions,
    radioTemplate as template,
} from "@microsoft/fast-foundation";
import { radioStyles as styles } from "./my-radio.styles";

export const myRadio = Radio.compose<RadioOptions>({
    baseName: "radio",
    template,
    styles,
    checkedIndicator: `...default checked indicator...`,
});

API​

class: Radio​

Superclass​

NameModulePackage
FormAssociatedRadio/src/radio/radio.form-associated.js

Fields​

NamePrivacyTypeDefaultDescriptionInherited From
readOnlypublicbooleanWhen true, the control will be immutable by user interaction. See readonly HTML attribute for more information.
namepublicstringThe name of the radio. See name attribute for more info.
proxyFormAssociatedRadio
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets 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
stylespublicElementStyles or void or nullSets 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​

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Events​

NameTypeDescriptionInherited From
changeEmits a custom change event when the checked state changes

Attributes​

NameFieldInherited From
readonlyreadOnly

CSS Parts​

NameDescription
controlThe element representing the visual radio control
labelThe label

Slots​

NameDescription
checked-indicatorThe checked indicator
The default slot for the label

Additional resources​