Skip to main content
Version: 1.x

fast-switch

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

Setup​

Basic setup​

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

provideFASTDesignSystem()
    .register(
        fastSwitch()
    );

Customizing the Indicator​

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

provideFASTDesignSystem()
    .register(
        fastSwitch({
            switch: `...your switch indicator...`
        })
    );

Usage​

Live Editor
<fast-switch>
    Theme
    <span slot="checked-message">Dark</span>
    <span slot="unchecked-message">Light</span>
</fast-switch>
Result
Loading...

Create your own design​

import {
    Switch,
    SwitchOptions,
    switchTemplate as template,
} from "@microsoft/fast-foundation";
import { switchStyles as styles } from "./my-switch.styles";

export const mySwitch = Switch.compose<SwitchOptions>({
    baseName: "switch",
    template,
    styles,
    switch: `...default switch indicator...`,
});

API​

class: Switch​

Superclass​

NameModulePackage
FormAssociatedSwitch/src/switch/switch.form-associated.js

Fields​

NamePrivacyTypeDefaultDescriptionInherited From
readOnlypublicbooleanWhen true, the control will be immutable by user interaction. See readonly HTML attribute for more information.
proxyFormAssociatedSwitch
$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
labelThe label
switchThe element representing the switch, which wraps the indicator
status-messageThe wrapper for the status messages
checked-messageThe checked message
unchecked-messageThe unchecked message

Slots​

NameDescription
The deafult slot for the label
checked-messageThe message when in a checked state
unchecked-messageThe message when in an unchecked state

Additional resources​