# 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
medium
large
variantClass Class of the radio variant. variant primary
info
warning
danger


# 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
input

# Slots

Name Description Bindings
default

# 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