Checkbox
Checkbox allows a user to select and unselect a single option or multiple options from a group of items
Design
Code
Interactive Demo
I am label
<nile-checkbox label="I am label" ></nile-checkbox>
<nile-checkbox checked >I am label</nile-checkbox>
<nile-checkbox label="I am label" indeterminate> </nile-checkbox>
<nile-checkbox label="I am label" disabled> </nile-checkbox>
Attributes & Properties
| Name |
Description |
Reflects |
Type |
Default |
| name |
Gives the name to the checkbox. |
|
string |
- |
| value |
The current value of the selected checkbox. |
|
string |
- |
| checked |
sets checked or unchecked state of checkbox |
|
boolean |
false |
| indeterminate |
sets indeterminate state on checkbox (has low prority than checked attribute) |
|
boolean |
false |
| required |
makes it necessary to fill this field |
|
boolean |
false |
| checked |
The check box is selected or not |
|
boolean |
- |
| label |
The checkbox input label describes the option users can select or unselect. Together with checkbox input, this makes one checkbox. |
|
string |
- |
| error-message |
error message shown below the checkbox |
|
string |
'' |
| showHelpText |
show help tool tip |
|
boolean |
false |
| help-text |
text for help tool tip |
|
string |
'' |
Events
| Name |
Description |
| blur |
Emitted when the checkbox loses focus. |
| focus |
Emitted when the checkbox gains focus. |
| input |
Emitted when the checkbox receives input. |
| nile-init |
Emitted when the component connects. |
| nile-destroy |
Emitted when the component disconnects. |
Slots
| Name |
Description |
| (default) |
Default component slot for checkbox's label |
Dependencies
nile-icon,
nile-tooltip,
nile-form-error-message