aurelia-form
Version:
Makes working with forms just a tad more pleasant.
53 lines (40 loc) • 1.79 kB
Markdown
# form-checkbox
The `<form-checkbox />` component allows you to render a checkbox.
## Attributes
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 |
## Examples
### Boolean checkbox
Boolean checkboxes are the simplest.
```html
<form-checkbox name="rememberMe" value.bind="rememberMe"></form-checkbox>
```
### Multi-select
Here's an example that supports selecting multiple values.
**View**
```html
<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>
```
**ViewModel**
```js
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.