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
Appends an icon to the component, uses the same syntax as v-icon
Components.SelectionControls.
Changes the background-color of the input
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))
Displays radio buttons in column
Applies the dark theme variant
Disable the input
Puts the input in a manual error state
The total number of errors that should display at once
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
Sets the component height
Hides hint, validation errors
Hint text
Sets input label
Applies the light theme variant
Displays linear 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
Forces a selection on a v-radio child
Displays a list of messages or message if using a string
Sets the component's name attribute
Forces hint to always be visible
Prepends an icon to the component, uses the same syntax as v-icon
Components.SelectionControls.
Puts input in readonly state
Displays radio buttons in row
Accepts an array of functions that return either True or a String with an error message
Puts the input in a manual success state
Puts the input in a success state and passes through custom success messages.
Delays validation until blur event
Sets the value of the selection control component
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