Toggle
Toggles are switches that change the state of a single option. They can be switched on or off by pressing or swiping them. Toggles can also be checked programmatically by setting the checked property.
Examples
Basic Usage
js
<Mdx-toggle label="Default Toggle" />
<br />
<Mdx-toggle checked="true" label="Checked Toggle" />
<br />
<Mdx-toggle disabled="true" label="Disabled Toggle" />
<br />
<Mdx-toggle checked="true" disabled="true" label="Checked Disabled Toggle" />Label Placement
Developers can use the labelPlacement property to control how the label is placed relative to the control.
js
<Mdx-toggle labelPlacement="start" label="Label at the Start" />
<br />
<Mdx-toggle labelPlacement="end" label="Label at the End" />
<br />
<Mdx-toggle labelPlacement="fixed" label="Fixed Width Label" />
<br />
<Mdx-toggle 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-toggle v-model="v$.variable" label="Toggle" />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 toggle is selected. |
|---|---|
| Type | Boolean |
| Required | false |
label
| Description | The visible label associated with the toggle. |
|---|---|
| Type | String |
| Required | true |
disabled
| Description | If true, the user cannot interact with the toggle. |
|---|---|
| Type | Boolean |
| Default | false |
size
| Description | Size of the toggle |
|---|---|
| Type | "small" | "default" |
| Default | default |