Switch

  • Article

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

fluent-switch

Setup

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

provideFluentDesignSystem()
    .register(
        fluentSwitch()
    );

Customizing the indicator

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

provideFluentDesignSystem()
    .register(
        fluentSwitch({
            switch: `...your switch indicator...`
        })
    );

Example

FluentSwitch

<FluentSwitch> wraps the <fluent-switch> element, a web component implementation of a switch leveraging the Fluent UI design system.

Usage

@using Microsoft.Fast.Components.FluentUI
<FluentSwitch></FluentSwitch>
<FluentSwitch>
    Dark Mode
</FluentSwitch>
<FluentSwitch Checked="true">
    New Feature
    <span slot="checked-message">On</span>
    <span slot="unchecked-message">Off</span>
</FluentSwitch>

Example

See the component in action with implementation examples at the Blazor demo site.

Additional Resources

W3C Component Aria Practices