`ftd.checkbox`
A `ftd.checkbox` is a [kernel component](/ftd/kernel/) 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
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
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.
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
Lang:
ftd
Output
This checkbox is disabled and is checked
Support `fastn`!
Enjoying `fastn`? Please consider giving us a star ⭐️ on
[GitHub](https://github.com/fastn-stack/fastn) to show your support!
[⭐️](https://github.com/fastn-stack/fastn)
Getting Help
Have a question or need help?
Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a)
to get answers and subscribe to it to stay tuned.
Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your
thoughts, suggestion, question etc.
Connect with our [community](/community/)!
[💻️](/community/)
Found an issue?
If you find some issue, please visit our [GitHub
issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.
Quick links:
- [Install `fastn`](install/)
- [Create `fastn` package](create-fastn-package/)
- [Expander Crash Course](expander/)
- [Syntax Highlighting in Sublime Text](/sublime/)
Join us
We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community
today.
We are trying to create the language for human beings and we do not believe it
would be possible without your support. We would love to hear from you.
Copyright © 2023 - fastn.com
