ftd.checkbox
A
ftd.checkbox is a kernel component that is used to select
one or more options from a set of choices.Usage
Sample usage
Input
-- ftd.row:
spacing.fixed.px: 5
color: $inherited.colors.text
align-content: center
-- ftd.checkbox:
-- ftd.text: FifthTry
-- end: ftd.row
Lang:
ftd
Output
FifthTry
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
Lang:
ftd
Output
The checkbox is not checked
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.checkedInput
-- 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
Lang:
ftd
Output
This checkbox is checked when page loads
enabled: optional boolean
The enabled attribute sets or returns whether a checkbox should be enabled, or
not.
enabled is set to false, the checkbox component is unusable and
un-clickable. Disabled elements are usually rendered in gray by default in
browsers.checkedInput
-- 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
Lang:
ftd
Output
This checkbox is disabled and is checked
