Skip to content
On this page

Radio

Select an option from a set

Base

Selection: Jack

Variants

Class props


How does Class props inspector work?
Class propDescriptionPropsSuffixes
checkCheckedClassClass of the native radio element when checked.
checkClassClass of the native radio element.
checkedClassClass of the root element when checked.
disabledClassClass when radio is disabled.disabled
labelClassClass of the radio label.
rootClassClass of the root element.
sizeClassClass of the radio size.sizesmall
medium
large
variantClassClass of the radio variant.variantprimary
info
warning
danger


Props

Prop nameDescriptionTypeValuesDefault
disabledSame as native disabledboolean-
nameSame as native namestring-
nativeValueSame as native valuestring|number|boolean|array-
overrideboolean-
requiredboolean-
sizeSize of the control, optionalstringsmall, medium, large
v-modelstring|number|boolean|array-
variantColor of the control, optionalstringprimary, info, success, warning, danger, and any other custom color

Events

Event namePropertiesDescription
update:modelValue
input

Slots

NameDescriptionBindings
default

Style

📄 Full scss file

CSS VariableSASS VariableDefault
--oruga-radio-active-background-color$radio-active-background-color$primary
--oruga-radio-checked-box-shadow-length$radio-checked-box-shadow-length0 0 0.5em
--oruga-radio-checked-box-shadow-opacity$radio-checked-box-shadow-opacity0.8
--oruga-radio-disabled-opacity$radio-disabled-opacity$base-disabled-opacity
--oruga-radio-label-padding$radio-label-padding0 0 0 .5em
--oruga-radio-margin-sibiling$radio-margin-sibiling0.5em
--oruga-radio-size$radio-size1rem
--oruga-radio-line-height$radio-line-height1.25

Released under the MIT License.