Checkbox
Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the checked property. They can also be checked programmatically by setting the checked property.
Examples
Basic Usage
js
<Mdx-checkbox v-model="variable" label="Checkbox" />Label Placement
Developers can use the labelPlacement property to control how the label is placed relative to the control. This property mirrors the flexbox flex-direction property.
js
<Mdx-checkbox labelPlacement="start" label="Label at the Start" />
<br />
<Mdx-checkbox labelPlacement="end" label="Label at the End" />
<br />
<Mdx-checkbox labelPlacement="fixed" label="Fixed Width Label" />
<br />
<Mdx-checkbox labelPlacement="stacked" label="Stacked Label" />Validations
You can add validations by using Vuelidate value for v-model. Validations will be automatically parsed from v$
js
<Mdx-input v-model="v$.variable" label="Checkbox" />Properties
v-model
| Description | You can pass simple variable to v-model as well as Vueliade v$.variable to enabling validations |
|---|---|
| Type | "Object" | "Boolean" | "null" |
| Required | true |
checked
| Description | If true, the checkbox is selected. |
|---|---|
| Type | Boolean |
| Required | false |
label
| Description | The visible label associated with the checkbox. |
|---|---|
| Type | String |
| Required | true |
disabled
| Description | If true, the user cannot interact with the checkbox. |
|---|---|
| Type | Boolean |
| Default | false |
size
| Description | Size of the checkbox |
|---|---|
| Type | "small" | "default" |
| Default | default |