VSelectionControl API

Props

name	type	default
`base-color`	string	undefined
Sets the color of the input when it is not focused.
`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.
`disabled`	boolean	null
Removes the ability to click or target the component.
`error`	boolean	false
Puts the input in a manual error state.
`false-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
The icon used when inactive.
`false-value`	any	undefined
Sets value for falsy state.
`id`	string	undefined
Sets the DOM id on the component.
`inline`	boolean	false
Puts children inputs into a row.
`label`	string	undefined
Sets the text of the v-label or v-field-label 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 select to multiple. Accepts array for value.
`name`	string	undefined
Sets the component’s name attribute.
`readonly`	boolean	null
Puts input in readonly state.
`ripple`	boolean \| { class: string; keys: string[] }	true
Applies the v-ripple directive.
`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.
`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.

Events

name	type
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.

Slots

{
  backgroundColorClasses: Ref<string[], string[]>
  backgroundColorStyles: Ref<CSSProperties, CSSProperties>
}

{
  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> }

`default`
The default Vue slot.
`input`
The slot used for the default input element.
`label`
The default slot of the v-label or v-field-label component.

Exposed

HTMLInputElement

boolean

`input`
Reference to the root input element.
`isFocused`
Will return true if the component is currently focused.

SASS Variables

name	default
`$selection-control-color`	tools.theme-color('on-surface', var(--v-high-emphasis-opacity))
`$selection-control-density`	('default': 0, 'comfortable': -1, 'compact': -3)
`$selection-control-disabled-color`	tools.theme-color('on-surface', var(--v-disabled-opacity))
`$selection-control-error-color`	rgb(var(--v-theme-error))
`$selection-control-size`	40px

#VSelectionControl API

VSelectionControl API