Radio

Select an option from a set

---

edit on github

Examples

Base

<template>
  <section>
    <div class="block">
      <o-radio v-model="radio" name="name" native-value="Flint">
        Flint
      </o-radio>
      <o-radio v-model="radio" name="name" native-value="Silver">
        Silver
      </o-radio>
      <o-radio v-model="radio" name="name" native-value="Jack">
        Jack
      </o-radio>
      <o-radio v-model="radio" name="name" native-value="Vane" disabled>
        Vane
      </o-radio>
    </div>
    <p class="content">
      <b>Selection:</b>
      {{ radio }}
    </p>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        radio: 'Jack'
      }
    }
  }
</script>

Variants

<template>
  <section>
    <div class="field">
      <o-radio v-model="radio" native-value="default">
        Default
      </o-radio>
    </div>
    <div class="field">
      <o-radio v-model="radio" native-value="info" variant="info">
        Info
      </o-radio>
    </div>
    <div class="field">
      <o-radio v-model="radio" native-value="success" variant="success">
        Success
      </o-radio>
    </div>
    <div class="field">
      <o-radio v-model="radio" native-value="danger" variant="danger">
        Danger
      </o-radio>
    </div>
    <div class="field">
      <o-radio v-model="radio" native-value="warning" variant="warning">
        Warning
      </o-radio>
    </div>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        radio: 'default'
      }
    }
  }
</script>

Class props

📄 Full scss file

Radio

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

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