Sample usage
Input
-- ftd.row:
spacing.fixed.px: 5
color: $inherited.colors.text
align-content: center
-- ftd.checkbox:
-- ftd.text: FifthTry
-- end: ftd.row
Output
There is a special variable `$CHECKED` which can be used to access the current
checked state of `ftd.checkbox`.
Sample usage
Input
-- boolean $is-checked: false
-- ftd.row:
spacing.fixed.px: 5
color: $inherited.colors.text
align-content: center
-- ftd.checkbox:
checked: $is-checked
$on-click$: $ftd.set-bool($a = $is-checked, v = $CHECKED)
-- ftd.text: The checkbox is checked
if: { is-checked }
-- ftd.text: The checkbox is not checked
if: { !is-checked }
-- end: ftd.row
Output
Attributes
`ftd.checkbox` accepts the below attributes along with the [common
attributes](ftd/common/).
`checked: optional boolean`
The `checked` attribute is an optional boolean that indicates whether this
checkbox is checked by default (when the page loads). This specifies that
a checkbox component should be pre-selected (checked) when the page loads.
`checked`
Input
-- ftd.row:
spacing.fixed.px: 5
align-content: center
color: $inherited.colors.text
-- ftd.checkbox:
checked: true
-- ftd.text: This checkbox is checked when page loads
-- end: ftd.row
Output
`enabled: optional boolean`
The `enabled` attribute sets or returns whether a checkbox should be enabled, or
not.
If the `enabled` is set to false, the checkbox component is unusable and
un-clickable. Disabled elements are usually rendered in gray by default in
browsers.
`checked`
Input
-- ftd.row:
spacing.fixed.px: 5
align-content: center
color: $inherited.colors.text
-- ftd.checkbox:
enabled: false
checked: true
-- ftd.text: This checkbox is disabled and is checked
-- end: ftd.row
Output