Checkbox
The r-checkbox component is another basic element for user input. A checkbox is used to choose between two opposite states, often to select/deselect items or enable/disable actions.
Usage
Use checkboxes to provide a binary choice. For example to offer a choice about performing an action or not. It is considered “on” when it is checked, and “off” when it’s not.
Examples
Use one checkbox to offer one binary choice. You can also have caption to descript the option in more details.
You can use checkboxes as a group on related options.
You also can use the checkboxes in nested group. There is also fuzzy option to show partial selecting for children.
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | '' | Label for the checkbox |
| id | string | () => nanoid() | Unique id of the checkbox |
| caption | string | undefined | A text to describe the checkbox |
| modelValue | union, string, number, boolean, Array | false | Actual parent model for the component |
| value | union, string, boolean | 'on' | Used to decide if checkbox is selected. If this value exists in the v-model (array) or equals it, the checkbox shows as checked. |
| fuzzy | boolean | false | Semi-selected state |
| disabled | boolean | false | Disable checkbox |
| validate | Nullable, ValidationState | null | Validation result sent by Vuelidate |
| Name | Description |
|---|---|
| label | Holds the checkbox label and can contain HTML. |
| Name | Description |
|---|---|
| update:modelValue |
Copy writing rules
- Use the imperative voice for checkbox labels.
- Do not use terminal punctuation for checkbox labels.
- Maintain parallel construction for lists of related checkbox labels.