Skip to content

Radio

The Radio input component uses HTML's native radio inputs to allow a user to select one value from a set of options. The component supports the W3C ARIA APG Radio Group Pattern. Use it with the Field component to access all the functionalities.

Examples

Base

A radio component will render one selection at a time. Use the native-value property to specify the value that will be used as the modelValue property when the specific radio is checked.

Variants

Different styles can be achieved with the variant prop.

Sizes

The component can be displayed in different sizes using the size prop.

Radio component

Select an option from a set of options.

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

Props

Prop nameDescriptionTypeValuesDefault
autocompleteSame as native autocomplete options to use in HTML5 validationstring-
From config:
radio: {
  autocomplete: "off"
}
customValidityCustom HTML 5 validation error to set on the form controlstring | ((currentValue: unknown, state: ValidityState) => string)-
disabledSame as native disabledboolean-false
idSame as native id. Also set the for label for o-field wrapper - default is an uuid.string-useId()
labelInput label, unnecessary when default slot is usedstring-
v-modelThe input value state, use v-model to make it two-way bindingunknown-
nameSame as native namestring-
nativeValueSame as native valueunknown-
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:model-valuevalue T - updated modelValue propmodelValue prop two-way binding
inputvalue T - 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

Class Inspector

Classes applied to the element:
Class propDescriptionPropsSuffixes
rootClassClass of the root element.
checkedClassClass of the root element when checked.modelValue
sizeClassClass of the root element with size.sizesmall
medium
large
variantClassClass of the root element with variant.variantprimary
info
warning
danger
disabledClassClass of the root element when disabled.disabled
inputClassClass of the native input element.
labelClassClass of the radio label element.

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

SASS VariableDefault
$radio-size1.25em
$radio-colorsdv.$colors
$radio-active-background-colorcss.getVar("primary")
$radio-border-colorcss.getVar("grey")
$radio-shadowcss.getVar("shadow")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

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

Released under the MIT License.