VSwitch API

Props

name	type	default
`append-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Creates a v-icon component after default content in the append slot.
`base-color`	string	undefined
Sets the color of the input when it is not focused.
`center-affix`	boolean	true
Vertically align appendInner, prependInner, clearIcon and label in the center.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`defaults-target`	string	undefined
The target component to provide defaults values for.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`direction`	'vertical' \| 'horizontal'	'horizontal'
Changes the direction of the input.
`disabled`	boolean	null
Removes the ability to click or target the component.
`error`	boolean	false
Puts the input in a manual error state.
`error-messages`	string \| string[]	[]
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation.
`false-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
The icon used when inactive.
`false-value`	any	undefined
Sets value for falsy state.
`flat`	boolean	false
Display component without elevation. Default elevation for thumb is 4dp, `flat` resets it.
`focused`	boolean	false
Forces a focused state styling on the component.
`glow`	boolean	false
Makes prepend/append icons full opacity when the input is focused and apply color.
`hide-details`	boolean \| 'auto'	false
Hides hint and validation errors. When set to `auto` messages will be rendered only if there’s a message (hint, error message, counter value etc) to display.
`hide-spin-buttons`	boolean	false
Hides spin buttons on the input when type is set to `number`.
`hint`	string	undefined
Displays hint text below the input when focused. Force this always open with the persistent-hint property.
`icon-color`	string \| boolean	false
Sets the color of the prepend/append icons.
`id`	string	undefined
Sets the DOM id on the component.
`indent-details`	boolean	null
Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls.
`indeterminate`	boolean	false
Sets an indeterminate state for the switch.
`inline`	boolean	false
Puts children inputs into a row.
`inset`	boolean	false
Enlarge the `v-switch` track to encompass the thumb.
`label`	string	undefined
Sets the text of the v-label or v-field-label component.
`loading`	string \| boolean	false
Displays circular progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color.
`max-errors`	string \| number	1
Control the maximum number of shown errors from validation.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`messages`	string \| string[]	[]
Displays a list of messages or a single message if using a string.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`model-value`	unknown	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`multiple`	boolean	null
Changes expected model to an array.
`name`	string	undefined
Sets the component’s name attribute.
`persistent-hint`	boolean	false
Forces hint to always be visible.
`prepend-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Prepends an icon to the component, uses the same syntax as `v-icon`.
`readonly`	boolean	null
Puts input in readonly state.
`ripple`	boolean \| { class: string; keys: string[] }	true
Applies the v-ripple directive.
`rules`	( \| string \| boolean \| PromiseLike<ValidationResult> \| ((value: any) => string \| false \| true) \| ((value: any) => PromiseLike<ValidationResult>) \| [string, any, string] )[]	[]
Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`true-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
The icon used when active.
`true-value`	any	undefined
Sets value for truthy state.
`type`	string	undefined
Provides the default type for children selection controls.
`validate-on`	\| 'eager' \| 'lazy' \| 'blur' \| 'input' \| 'submit' \| 'invalid-input' \| 'blur lazy' \| 'input lazy' \| 'submit lazy' \| 'invalid-input lazy' \| 'blur eager' \| 'input eager' \| 'submit eager' \| 'invalid-input eager' \| 'lazy blur' \| 'lazy input' \| 'lazy submit' \| 'lazy invalid-input' \| 'eager blur' \| 'eager input' \| 'eager submit' \| 'eager invalid-input'	undefined
Change what type of event triggers validation to run.
`validation-value`	any	undefined
The value used when applying validation rules.
`value`	any	undefined
The value used when the component is selected in a group. If not provided, a unique ID will be used.
`value-comparator`	(a: any, b: any) => boolean	undefined
Apply a custom comparison algorithm to compare model-value and values contains in the items prop.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`click:append`	[MouseEvent]
Emitted when appended icon is clicked.
`click:prepend`	[MouseEvent]
Emitted when prepended icon is clicked.
`update:focused`	[boolean]
Event that is emitted when the component’s focus state changes.
`update:indeterminate`	[boolean]
Event that is emitted when the component’s indeterminate state changes.
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.

Slots

{
  id: ComputedRef<string>
  messagesId: ComputedRef<string | undefined>
  isDirty: ComputedRef<boolean>
  isDisabled: ComputedRef<boolean>
  isReadonly: ComputedRef<boolean>
  isPristine: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
  isValidating: Ref<boolean, boolean>
  hasDetails: Ref<boolean, boolean>
  reset: () => void
  resetValidation: () => void
  validate: () => void
}

{
  id: ComputedRef<string>
  messagesId: ComputedRef<string | undefined>
  isDirty: ComputedRef<boolean>
  isDisabled: ComputedRef<boolean>
  isReadonly: ComputedRef<boolean>
  isPristine: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
  isValidating: Ref<boolean, boolean>
  hasDetails: Ref<boolean, boolean>
  reset: () => void
  resetValidation: () => void
  validate: () => void
} & {
  backgroundColorClasses: Ref<string[], string[]>
  backgroundColorStyles: Ref<CSSProperties, CSSProperties>
}

{
  id: ComputedRef<string>
  messagesId: ComputedRef<string | undefined>
  isDirty: ComputedRef<boolean>
  isDisabled: ComputedRef<boolean>
  isReadonly: ComputedRef<boolean>
  isPristine: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
  isValidating: Ref<boolean, boolean>
  hasDetails: Ref<boolean, boolean>
  reset: () => void
  resetValidation: () => void
  validate: () => void
}

{
  model: WritableComputedRef<boolean, boolean>
  textColorClasses: Ref<string[], string[]>
  textColorStyles: Ref<CSSProperties, CSSProperties>
  backgroundColorClasses: Ref<string[], string[]>
  backgroundColorStyles: Ref<CSSProperties, CSSProperties>
  inputNode: VNode<RendererNode, RendererElement, { [key: string]: any }>
  icon:
    | string
    | (string | [string, number])[]
    | (new () => any)
    | FunctionalComponent
  props: {
    onBlur: (e: Event) => void
    onFocus: (e: FocusEvent) => void
    id: string
  }
}

{ label: string; props: Record<string, unknown> }

{ color: string; isActive: boolean }

{ message: string }

{
  id: ComputedRef<string>
  messagesId: ComputedRef<string | undefined>
  isDirty: ComputedRef<boolean>
  isDisabled: ComputedRef<boolean>
  isReadonly: ComputedRef<boolean>
  isPristine: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
  isValidating: Ref<boolean, boolean>
  hasDetails: Ref<boolean, boolean>
  reset: () => void
  resetValidation: () => void
  validate: () => void
}

{
  icon:
    | string
    | (string | [string, number])[]
    | (new () => any)
    | FunctionalComponent
} & { model: Ref<boolean, boolean>; isValid: ComputedRef<boolean | null> }

{
  model: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
}

{
  model: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
}

`append`
Adds an item inside the input and after input content.
`default`
The default Vue slot.
`details`
Slot for custom input details to modifying the display of messages.
`input`
The slot used for the default input element.
`label`
The default slot of the v-label or v-field-label component.
`loader`
Slot for custom loader (displayed when loading prop is equal to true).
`message`
Slot used to customize the message content.
`prepend`
Adds an item outside the input and before input content.
`thumb` New in v3.5.0
Slot for custom thumb content.
`track-false` New in v3.5.0
Slot for custom track content when value is false.
`track-true` New in v3.5.0
Slot for custom track content when value is true.

Exposed

string[]

boolean

() => Promise<void>

() => Promise<void>

(silent: boolean) => Promise<string[]>

`errorMessages`
An array of error messages that were set by the `setErrors` method.
`isValid`
Boolean indicating if the input is valid.
`reset`
Resets the input value.
`resetValidation`
Resets validation of the input without modifying its value.
`validate`
Validates the input’s value.

SASS Variables

name	default
`$switch-control-input-transition`	.2s transform settings.$standard-easing
`$switch-error-background-color`	rgb(var(--v-theme-error))
`$switch-error-color`	rgb(var(--v-theme-on-error))
`$switch-flex`	0 1 auto
`$switch-inset-thumb-height`	24px
`$switch-inset-thumb-off-height`	16px
`$switch-inset-thumb-off-width`	16px
`$switch-inset-thumb-width`	24px
`$switch-inset-track-border-radius`	9999px
`$switch-inset-track-height`	32px
`$switch-inset-track-width`	52px
`$switch-label-margin-inline-start`	10px
`$switch-loader-color`	rgb(var(--v-theme-surface))
`$switch-thumb-background`	rgb(var(--v-theme-surface-bright))
`$switch-thumb-color`	rgb(var(--v-theme-on-surface-bright))
`$switch-thumb-elevation`	2
`$switch-thumb-flat-background`	rgb(var(--v-theme-surface-variant))
`$switch-thumb-flat-color`	rgb(var(--v-theme-on-surface-variant))
`$switch-thumb-height`	20px
`$switch-thumb-offset`	2px
`$switch-thumb-radius`	50%
`$switch-thumb-transition`	.15s .05s transform settings.$decelerated-easing, .2s color settings.$standard-easing, .2s background-color settings.$standard-easing
`$switch-thumb-vertical-transform`	rotate(-90deg)
`$switch-thumb-width`	20px
`$switch-track-background`	rgb(var(--v-theme-surface-variant))
`$switch-track-height`	14px
`$switch-track-opacity`	.6
`$switch-track-radius`	9999px
`$switch-track-transition`	.2s background-color settings.$standard-easing
`$switch-track-width`	36px

#VSwitch API

VSwitch API