Switch

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

Design Spec

Link to Switch Design Spec in Figma

Engineering Spec

Fluent WC3 Switch extends from the FAST Switch and is intended to be as close to the Fluent UI React 9 Switch implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.

Use Case

Typical use cases include, but are not limited to, turning a feature on and off or showing or hiding a piece of UI

Class: Switch

Component Name

fluent-switch

Variables

Fields

Name	Privacy	Type	Default	Description
checked	public	boolean		Specifies whether switch input is checked
required	public	boolean	false	Specifies required styling for switch
disabled	public	boolean	false	Sets disabled state for switch
labelPosition	public	"small" "medium" "large"	"medium"	Specifies position of the label relative to the switch

Methods

Events

| Name | Type | Description | Inherited From | | ------ | ---- | ----------- | ---------------------------------------------------------- | --- | | change | | | Emits a custom change event when the checked state changes | |

Attributes

Name	Field
required	required
disabled	disabled
checked	checked
label-position	labelPosition

Slots

Name	Description
	Default slotted content for the label

<hr />

Template

switchTemplate from FastFoundation

Accessibility

W3 Switch Spec

WAI-ARIA Roles, States, and Properties

• aria-checked
• aria-disabled

<hr />

Preparation

Fluent Web Component v3 v.s Fluent React 9

Component and Slot Mapping

Fluent UI React 9	Fluent Web Components 3
<Switch>	<fluent-switch>

Property Mapping

Fluent UI React 9	Fluent Web Components 3	Description of difference
<Switch label="">	default slotted content	React implementation requires user to pass label through prop on the Switch
The web components implementation requires user to pass the label through the default slotted content