Toggle

Toggles are boolean form components used for easily enabling or disabling features.

Basic Usage

Basic Toggle

Sizes

You're able to use the size property to control the size of your inputs, using one of the available sizes: sm, md, and lg. The default size is set to md.

Toggle Sizes

Applying the size size property to an i-form-group will also set the chosen size to all of its i-toggle inputs.

Readonly State

You can set the toggle input to be readonly by using the readonly property.

Readonly Toggle

Disabled State

You can set the toggle input to be disabled by using the disabled property.

Disabled Toggle

API

Toggle API <i-toggle>
Property Description Type Accepted Default
disabled Sets the state of the toggle input form component as disabled. Boolean true, false false
readonly Sets the state of the toggle input form component as readonly. Boolean true, false false
schema Provides a schema binding to the toggle input form component. See the Form Validation documentation. Object
size Sets the size of the toggle input form component. String sm, md, lg md
value Sets the value of the toggle input form component. Can be also provided using a v-model directive when the toggle input isn't grouped. Boolean
Toggle Group API <i-form-group>
Property Description Type Accepted Default
disabled Sets the state of the toggle input form group component as disabled. Boolean true, false false
readonly Sets the state of the toggle input form group component as readonly. Boolean true, false false
size Sets the size of the toggle input form group component. String sm, md, lg md
value Sets the value of the toggle input form group component. To be provided using the v-model directive. Array<String> []