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
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-
v-modelThe input value statestring|number|boolean|object-
nameSame as native namestring-
nativeValueSame as native valuestring|number|boolean|object-
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
}
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 | object - updated modelValue propmodelValue prop two-way binding
inputvalue string | number | boolean | object - 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

SASS VariableDefault
$radio-active-background-color$primary
$radio-checked-box-shadow-length0 0 0.5em
$radio-checked-box-shadow-opacity0.8
$radio-box-shadow$control-box-shadow
$radio-disabled-opacityvar(--#{$prefix}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.