Toggle Input

<k-input v-model="toggle" name="toggle" type="toggle" />

Props

autofocus

Boolean (default: false)

If true, the input will be instantly focused when the form is created

disabled

Boolean (default: false)

If true, the input is disabled and cannot be filled in or edited

icon

String (default: null)

Sets the icon, that is shown on the right next to the input.

id

String (default: null)

The id for the input element.

name

String (default: null)

The name of the input element.

required

Boolean (default: false)

If true, the input must not be empty

theme

String (default: null)

By default, inputs are as unstyled as possible to provide a clean boilerplate. If you need the typical field input look, you can set the theme to field

text

String|Array (default: ['off', 'on'])

The text to display next to the toggle. This can either be a string that doesn't change when the toggle switches. Or an array with the first value for the false text and the second value for the true text.

value / v-model

Boolean (default: null)

Methods

focus()

The focus event can be used to set the focus on the input.

Events

@input

The input event is triggered when the value changes.

@invalid

The invalid event is triggered when the input validation fails. This can be used to react on errors immediately.

CSS class

.k-toggle-input