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
| Name | Module | Package |
|---|---|---|
FormAssociatedCheckbox | /src/checkbox/checkbox.form-associated.js |
Fields
| Name | Privacy | Type | Default | Description | Inherited From |
|---|---|---|---|---|---|
readOnly | public | boolean | When true, the control will be immutable by user interaction. See readonly HTML attribute for more information. | ||
indeterminate | public | boolean | false | The indeterminate state of the control | |
proxy | FormAssociatedCheckbox | ||||
$presentation | public | ComponentPresentation or null | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | |
template | public | ElementViewTemplate or void or null | Sets 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 | |
styles | public | ElementStyles or void or null | Sets 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
| Name | Privacy | Description | Parameters | Return | Inherited From |
|---|---|---|---|---|---|
templateChanged | protected | void | FoundationElement | ||
stylesChanged | protected | void | FoundationElement |
Events
| Name | Type | Description | Inherited From |
|---|---|---|---|
change | Emits a custom change event when the checked state changes |
Attributes
| Name | Field | Inherited From |
|---|---|---|
readonly | readOnly |
CSS Parts
| Name | Description |
|---|---|
control | The element representing the visual checkbox control |
label | The label |
Slots
| Name | Description |
|---|---|
checked-indicator | The checked indicator |
indeterminate-indicator | The indeterminate indicator |
| The default slot for the label |