UNPKG

aurelia-form

Version:

Makes working with forms just a tad more pleasant.

53 lines (40 loc) 1.79 kB
# 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.