# Radio

Select an option from a set

edit on github

# Examples

# Base

# Variants

# Class props

📄 Full scss file

How does Class props inspector work?
Class prop Description Props Suffixes
checkCheckedClass Class of the native radio element when checked.
checkClass Class of the native radio element.
checkedClass Class of the root element when checked.
disabledClass Class when radio is disabled. disabled
labelClass Class of the radio label.
rootClass Class of the root element.
sizeClass Class of the radio size. size small
variantClass Class of the radio variant. variant primary

# Props

Prop name Description Type Values Default
disabled Same as native disabled boolean -
name Same as native name string -
nativeValue Same as native value string|number|boolean|array -
override Override classes boolean - false
required boolean -
size Size of the control, optional string small, medium, large
v-model string|number|boolean|array -
variant Color of the control, optional string primary, info, success, warning, danger, and any other custom color

# Events

Event name Properties Description

# Slots

Name Description Bindings

# Style

CSS Variable SASS Variable Default
--oruga-radio-active-background-color $radio-active-background-color $primary
--oruga-radio-checked-box-shadow-length $radio-checked-box-shadow-length 0 0 0.5em
--oruga-radio-checked-box-shadow-opacity $radio-checked-box-shadow-opacity 0.8
--oruga-radio-disabled-opacity $radio-disabled-opacity $base-disabled-opacity
--oruga-radio-label-padding $radio-label-padding 0 0 0 .5em
--oruga-radio-margin-sibiling $radio-margin-sibiling 0.5em
--oruga-radio-size $radio-size 1rem
--oruga-radio-line-height $radio-line-height 1.25