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.

Usage


API

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

Appends an icon to the component, uses the same syntax as v-icon

Name
append-icon-cb
Default
null
Type
function

Callback for appended icon when clicked

Name
background-color
Default
undefined
Type
string

Changes the background-color of the input

Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
column
Default
true
Type
boolean

Displays radio buttons in column

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disabled
Default
false
Type
boolean
Name
error
Default
false
Type
boolean

Puts the input in a manual error state

Name
error-count
Default
1
Type
number | string

The total number of errors that should display at once

Name
error-messages
Default
[]
Type
string | array

Puts the input in an error state and passes through custom error messsages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation

Name
height
Default
auto
Type
number | string

Sets the component height

Name
hide-details
Default
false
Type
boolean

Hides hint, validation errors

Name
hint
Default
undefined
Type
string

Hint text

Name
label
Default
undefined
Type
string

Sets input label

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
mandatory
Default
true
Type
boolean

Forces a selection on a v-radio child

Name
messages
Default
[]
Type
string | array

Displays a list of messages or message if using a string

Name
name
Default
undefined
Type
string

Sets the component's name attribute

Name
persistent-hint
Default
false
Type
boolean

Forces hint to always be visible

Name
prepend-icon
Default
undefined
Type
string

Prepends an icon to the component, uses the same syntax as v-icon

Name
prepend-icon-cb
Default
null
Type
function

Callback for prepended icon when clicked

Name
readonly
Default
false
Type
boolean
Name
row
Default
false
Type
boolean

Displays radio buttons in row

Name
rules
Default
[]
Type
array

Accepts an array of functions that return either True or a String with an error message

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

Puts the input in a manual success state

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

Puts the input in a success state and passes through custom success messsages.

Name
validate-on-blur
Default
false
Type
boolean

Delays validation until blur event

Name
value
Default
undefined
Type
any

Sets the value of the selection control component

Name
value-comparator
Default
null
Type
function

Apply a custom value comparator function

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