Skip to main content
Version: 1.x

fast-checkbox

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

Setup

Basic Setup

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

provideFASTDesignSystem()
.register(
fastCheckbox()
);

Customizing Indicators

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

provideFASTDesignSystem()
.register(
fastCheckbox({
checkedIndicator: `...your checked indicator...`,
indeterminateIndicator: `...your indeterminate indicator...`,
})
);

Usage

Live Editor
<fieldset>
    <legend>Fruits</legend>
    <fast-checkbox checked>Apple</fast-checkbox>
    <fast-checkbox checked>Banana</fast-checkbox>
    <fast-checkbox>Honeydew</fast-checkbox>
    <fast-checkbox checked>Mango</fast-checkbox>
</fieldset>
Result
Loading...

Create your own design

import {
Checkbox,
CheckboxOptions,
checkboxTemplate as template,
} from "@microsoft/fast-foundation";
import { checkboxStyles as styles } from "./my-checkbox.styles";

export const myCheckbox = Checkbox.compose<CheckboxOptions>({
baseName: "checkbox",
template,
styles,
checkedIndicator: `...default checked indicator...`,
indeterminateIndicator: `...default indeterminate indicator...`,
});

API

class: Checkbox

Superclass

NameModulePackage
FormAssociatedCheckbox/src/checkbox/checkbox.form-associated.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
readOnlypublicbooleanWhen true, the control will be immutable by user interaction. See readonly HTML attribute for more information.
indeterminatepublicbooleanfalseThe indeterminate state of the control
proxyFormAssociatedCheckbox
$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 checkbox control
labelThe label

Slots

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

Additional resources