Selection controls

Selection control components allow a user to select options. These components must be used with the v-model prop as they do not maintain their own state.

API

v-radio-group
Name
append-icon
Default
undefined
Type
string

Components.SelectionControls.

Name
append-icon-cb
Default
null
Type
function

Components.SelectionControls.

Name
background-color
Default
undefined
Type
string

Components.SelectionControls.

Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前(例えばsuccesspurple)や、CSSの色指定(#033rgba(255, 0, 0, 0.5))を設定できます。

Name
column
Default
true
Type
boolean

Components.SelectionControls.

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
disabled
Default
false
Type
boolean

Components.SelectionControls.

Name
error
Default
false
Type
boolean

Components.SelectionControls.

Name
error-count
Default
1
Type
number | string

Components.SelectionControls.

Name
error-messages
Default
[]
Type
string | array

Components.SelectionControls.

Name
height
Default
auto
Type
number | string

Components.SelectionControls.

Name
hide-details
Default
false
Type
boolean

Components.SelectionControls.

Name
hint
Default
undefined
Type
string

Components.SelectionControls.

Name
label
Default
undefined
Type
string

Components.SelectionControls.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
loading
Default
false
Type
boolean

Components.SelectionControls.

Name
mandatory
Default
true
Type
boolean

Components.SelectionControls.

Name
messages
Default
[]
Type
string | array

Components.SelectionControls.

Name
name
Default
undefined
Type
string

Components.SelectionControls.

Name
persistent-hint
Default
false
Type
boolean

Components.SelectionControls.

Name
prepend-icon
Default
undefined
Type
string

Components.SelectionControls.

Name
prepend-icon-cb
Default
null
Type
function

Components.SelectionControls.

Name
readonly
Default
false
Type
boolean

Components.SelectionControls.

Name
row
Default
false
Type
boolean

Components.SelectionControls.

Name
rules
Default
[]
Type
array

Components.SelectionControls.

Name
success New in — v1.1
Default
false
Type
boolean

Components.SelectionControls.

Name
success-messages New in — v1.1
Default
[]
Type
string | array

Components.SelectionControls.

Name
validate-on-blur
Default
false
Type
boolean

Components.SelectionControls.

Name
value
Default
undefined
Type
any

Components.SelectionControls.

Name
value-comparator
Default
null
Type
function

Components.SelectionControls.

Examples

Checkboxes - Boolean

Checkboxes - Array

Checkboxes - States

Checkboxes - Colors

Checkboxes can be colored by using any of the builtin colors and contextual names using the color prop.

Checkboxes - Inline with a textfield

Radios - Default

Radio-groups are by default mandatory. This can be changed with the mandatory prop.

Radios - Direction

Radio-groups can be presented either as a row or a column, using their respective props. The default is as a column.

Radios - Colors

Radios can be colored by using any of the builtin colors and contextual names using the color prop.

Switches - Boolean

Switches - Array

Switches - States

Switches - Colors

Switches can be colored by using any of the builtin colors and contextual names using the color prop.

Label slot

Selection controls' labels can be defined in label slot - that will allow to use HTML content

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore