The <form-checkbox /> component allows you to render a checkbox.


The following attributes (bindables) are available for this component.

attribute type default description
name string '' The name of the checkbox
value string/array false Value of the checkbox(es) (use for deault, too)
option string/array undefined The value of the checkbox
type string text The input type
classes string '' Classes to add
placeholder string '' A short hint that describes the expected value
readonly boolean false Specifies that the checkbox should be read-only
disabled boolean false Specifies that the checkbox should be disabled
options object {} Options to pass to the input element
autofocus boolean false Specifies to autofocus the checkbox
required boolean false Required to select a value


Boolean checkbox

Boolean checkboxes are the simplest.

<form-checkbox name="rememberMe" value.bind="rememberMe"></form-checkbox>


Here's an example that supports selecting multiple values.


<form-checkbox name="city" value.bind="cities" option="Amsterdam"></form-checkbox>
<form-checkbox name="city" value.bind="cities" option="Paris"></form-checkbox>
<form-checkbox name="city" value.bind="cities" option="London"></form-checkbox>
<form-checkbox name="city" value.bind="cities" option="Moscow"></form-checkbox>


class MyViewModel {
  // These are automatically checked
  @bindable cities = ['London'];

Note: The attribute option is not the same as a label. You'll have to add labels to your checkboxes.

results matching ""

    No results matching ""