Skip to content

Radio

Select an option from a set

Examples

Base

Show code

Variants

Show code

Sizes

Show code

Class props

'Classes applied to the element'

Radio component

Select an option from a set

html
<o-radio></o-radio>

Props

Prop nameDescriptionTypeValuesDefault
ariaLabelledbyAccessibility label to establish relationship between the checkbox and control labelstring-Default function (see source code)
autocompleteSame as native autocomplete options to use in HTML5 validationstring-
From config:
radio: {
  autocomplete: "off"
}
disabledSame as native disabledboolean-false
labelInput label, unnecessary when default slot is usedstring-
nameSame as native namestring-
nativeValueSame as native valuestring|number|boolean-
overrideOverride existing theme classes completelyboolean-
requiredSame as native requiredboolean-false
sizeSize of the controlstringsmall, medium, large
From config:
radio: {
  size: undefined
}
useHtml5ValidationEnable html 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}
v-modelstring|number|boolean-
variantColor of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
radio: {
  variant: undefined
}

Events

Event namePropertiesDescription
update:modelValuevalue string, number, boolean - updated modelValue propmodelValue prop two-way binding
inputvalue string, number, boolean - input value
event Event - native event
on input change event
focusevent Event - native eventon input focus event
blurevent Event - native eventon input blur event
invalidevent Event - native eventon input invalid event

Slots

NameDescriptionBindings
defaultOverride the label, default is label prop

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$radio-active-background-color$primary
$radio-checked-box-shadow-length0 0 0.5em
$radio-checked-box-shadow-opacity0.8
$radio-disabled-opacity$base-disabled-opacity
$radio-label-padding0 0 0 0.5em
$radio-margin-sibiling0.5em
$radio-size1rem
$radio-line-height1.25

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$radio-active-background-color$primary
$radio-checked-box-shadow-length0 0 0.5em
$radio-checked-box-shadow-opacity0.8
$radio-disabled-opacity$base-disabled-opacity
$radio-label-padding0 0 0 0.5em
$radio-margin-sibiling0.5em
$radio-size1rem
$radio-line-height1.25

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.

Released under the MIT License.