Checkbox
Overview of the Checkbox Component
The CheckboxWrapper allows the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a check box will toggle the checked property. They can also be checked programmatically by setting the checked property.
Properties
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
Every new CheckboxWrapper component is created with two default child components: Checkbox and ItemLabel.
Properties
| Property Name | Property Description |
|---|---|
| Item Wrapped | If set to true, the component will be included in the Item with additional properties |
| Show Label | If set to true, the component will have a label. |
| Lines | How the bottom border should be displayed on the item. Possible values are; Full, Inset, None. |
| Reorder | Reorder properties: Type - Content or Wrapper. If Wrapper is used, the item will be wrapped into a reorder tag. Icon - custom icon for Reorder with a type Content. Click the Default icon button to select the needed icon. Slot - position inside the item: Start or End. SVG Icon - used to select an svg file. This path will be added as the src attribute. Click the Change button to select the uploaded image from Media Manager. |
Checkbox
Setting the Checkbox component properties can be done from under Common and/or Styles tabs:
Properties
| Property Name | Property Description |
|---|---|
| Name | The name of the control, which is submitted with the form data. |
| Value | Used as data for forms and groups. The value of the check box does not mean if it is checked or not, use the checked property for that. |
| Checked | If set to true, the check box is selected. The default is set to false. |
| Indeterminate | If set to True, the check box will visually appear as indeterminate. The default is set to false. |
| [(ngModel)] | Angular directive for data binding. |
| (ionBlur) | The event emitted when the toggle loses focus. |
| (ionChange) | The event emitted when the value has changed. |
| (ionFocus) | The event emitted when the input has focus. |
Styles Properties
Under the Styles tab, checkboxes can be styled with additional attributes to look like in a specific way:
| Property Name | Property Description |
|---|---|
| Checkbox Size | Set the check box size in px, %, em, vh, and vw. |
| Checkmark | Color - select CSS checkmark color of the check box from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker. Width - stroke width of the check box checkmark in px, %, em, vh, and vw. |
ItemLabel
The ItemLabel component has the following common properties:
| Property Name | Property Description |
|---|---|
| Truncate Text | Set to True (default) to truncate label text if it is too long. |
| Position | The position determines where and how the label behaves inside an item. |
Styles Properties
Under the Styles tab, ItemLabel components can be styled with the following attributes to look like in a specific way:
| Property Name | Property Description |
|---|---|
| Font Size | Enter font size in px, %, em, vh, and vw. |
| Font Weight | Set the weight (or boldness) of the font: Normal or Bold. |
Using Checkbox as a Form Control
If included in a Form component, Checkbox becomes a Form Control:
The Name property should be specified (by default, the Name property is defined as the Component name property, so change it if necessary).
Use the following description only when the Form component has the disabled Native validation property. If the Native validation property is enabled the control can be used as a default HTML Form Control.
To set the initial value of the control, use the Initial Value property of the Form Control properties section. The component can have only boolean (true or false) values. If the property is not specified, the initial value will be set to null.
To use variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value. It replaces the value that is set by the Initial Value property.
The component can get additional properties (Control ID and Control options) that allow checking the validity, changing updating strategy, etc. These properties can be used if the Native Validation property is disabled for the Form component.
Read more about validation in the Form section.
Note!
The component can't be used with array iteration data for creating a dynamic form structure. If you need to create such kind of structure, follow these recommendations.
Visit the Ionic documentation to read more about checkboxes.
Updated about 5 hours ago