# Checkbox (fw-checkbox)
fw-checkbox displays a check box on the user interface and enables assigning a state (selected or deselected) to it. In the selected state, the check box displayed on the UI is highlighted and contains a check mark.
# Demo
Show Code
# Usage
# Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
checked | checked | Sets the state of the check box to selected. If the attribute’s value is undefined, the value is set to false. | boolean | false |
description | description | Description to be displayed for the checkbox. | string | '' |
disabled | disabled | Disables the check box on the interface. If the attribute’s value is undefined, the value is set to false. | boolean | false |
errorText | error-text | Error text displayed below the radio group. | string | '' |
hintText | hint-text | /** Hint text displayed below the radio group. | string | '' |
label | label | [DEPRECATED] Use description instead. Label displayed on the interface, for the check box. | string | '' |
name | name | Name of the component, saved as part of form data. | string | '' |
required | required | Specifies the input box as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false. | boolean | false |
state | state | Theme based on which the checkbox is styled. | "error" \| "normal" \| "warning" | 'normal' |
value | value | Identifier corresponding to the component, that is saved when the form data is saved. | string | '' |
warningText | warning-text | Warning text displayed below the radio group. | string | '' |
# Events
Event | Description | Type |
---|---|---|
fwBlur | Triggered when the check box loses focus. | CustomEvent<any> |
fwChange | Triggered when the checkbox state is modified. | CustomEvent<any> |
fwFocus | Triggered when the check box comes into focus. | CustomEvent<void> |
# Methods
# setFocus() => Promise<void>
Sets focus on a fw-checkbox
.
# Returns
Type: Promise<void>
# CSS Custom Properties
Name | Description |
---|---|
--fw-error-color | Color of the error text. |
--fw-hint-color | Color of the hint text. |
--fw-warning-color | Color of the warning text. |
# Dependencies
# Used by
# Depends on
# Graph
graph TD;
fw-checkbox --> fw-icon
fw-icon --> fw-toast-message
fw-toast-message --> fw-spinner
fw-toast-message --> fw-icon
fw-data-table --> fw-checkbox
fw-form-control --> fw-checkbox
fw-select-option --> fw-checkbox
style fw-checkbox fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks