Checkbox

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

Design Spec

Link to Checkbox Design Spec in Figma

Engineering Spec

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

Class: Checkbox

Component Name

<fluent-checkbox>

Component Template

FAST checkboxTemplate

Variables

Name	Description	Type
CheckboxLabelPosition	label position types	{ before: "before", after: "after" }
CheckboxShape	checkbox shape types	{ square: "square", circular: "circular" }
CheckboxSize	checkbox size types	{ medium: "medium", large: "large" }

Methods

Name	Privacy	Description
keypressHandler	public	fires on keyboard press
clickHandler	public	fires on mouse click

Events

Name	Type	Description	Inherited From
change		Fires a custom change event	FASTCheckbox

Attributes

Name	Privacy	Type	Default	Description
label-position	public	CheckboxLabelPosition	CheckboxLabelPosition.after	Indicates postion of label
checked	public	boolean	false	Indicates whether input is checked
indeterminate	public	boolean	false	Indicates whether input is initially indeterminate
disabled	public	boolean	false	Indicates whether input is disabled
required	public	boolean	false	Indicates whether input is required
size	public	CheckboxSize	CheckboxSize.medium	Indicates the size of the checkbox
shape	public	CheckboxShape	CheckboxShape.square	Indicates shape of the checkbox

IDL Attributes

Name	Field	Type	Description
checked	checked	boolean	The current checked state of the checkbox
indeterminate	indeterminate	boolean	The indeterminate state. Independent of checked

Slots

Name	Description
	The default slot for text input content
checked-indicator	The named slot for the checked indicator
indeterminate-indicator	The named slot for the indeterminate indicator

<hr />

Accessibility

W3C Checkbox Spec

WAI-ARIA Roles, States, and Properties

• role="checkbox"
• aria-checked
• aria-required
• aria-disabled

Fluent Web Component v3 v.s Fluent React 9

Component and Slot Mapping

Fluent UI React 9	Fluent Web Components 3	Description
<Checkbox>	<fluent-checkbox>
n/a	slot: checked-indicator	slot for checked indicator
n/a	slot: indeterminate-indicator	slot for indeterminate indicator

Property Mapping

Fluent UI React 9	Fluent Web Components 3	Description of difference
`checked: boolean	'mixed'`	checked: boolean indeterminate: boolean