Radio

Select an option from a set

Examples

Base

Show code

HTML

<section>
    <o-field>
        <o-radio
            v-model="radio"
            name="name"
            native-value="Flint"
            label="Flint" />

        <o-radio
            v-model="radio"
            name="name"
            native-value="Silver"
            label="Silver" />

        <o-radio
            v-model="radio"
            name="name"
            native-value="Jack"
            label="Jack" />

        <o-radio
            v-model="radio"
            name="name"
            native-value="Vane"
            label="Vane"
            disabled />
    </o-field>

    <p><b>Selection:</b> {{ radio }}</p>
</section>

JS

import { ref } from "vue";

const radio = ref("Jack");

Variants

Show code

HTML

<section>
    <o-field>
        <o-radio v-model="radio" native-value="default" label="Default" />
    </o-field>

    <o-field>
        <o-radio
            v-model="radio"
            native-value="primary"
            variant="primary"
            label="Primary" />
    </o-field>

    <o-field>
        <o-radio
            v-model="radio"
            native-value="success"
            variant="success"
            label="Success" />
    </o-field>

    <o-field>
        <o-radio
            v-model="radio"
            native-value="info"
            variant="info"
            label="Info" />
    </o-field>

    <o-field>
        <o-radio
            v-model="radio"
            native-value="warning"
            variant="warning"
            label="Warning" />
    </o-field>

    <o-field>
        <o-radio
            v-model="radio"
            native-value="danger"
            variant="danger"
            label="Danger" />
    </o-field>

    <p><b>Selection:</b> {{ radio }}</p>
</section>

JS

import { ref } from "vue";

const radio = ref("default");

Sizes

Show code

HTML

<section>
    <o-field>
        <o-radio
            v-model="radio"
            native-value="small"
            size="small"
            label="Small" />
    </o-field>

    <o-field>
        <o-radio v-model="radio" native-value="default" label="Default" />
    </o-field>

    <o-field>
        <o-radio
            v-model="radio"
            native-value="medium"
            size="medium"
            label="Medium" />
    </o-field>

    <o-field>
        <o-radio
            v-model="radio"
            native-value="large"
            size="large"
            label="Large" />
    </o-field>

    <p><b>Selection:</b> {{ radio }}</p>
</section>

JS

import { ref } from "vue";

const radio = ref("small");

Class props

'Classes applied to the element'

Radio component

Select an option from a set

<o-radio></o-radio>

Props

Prop name	Description	Type	Values	Default
autocomplete	Same as native autocomplete options to use in HTML5 validation	string	-	From config: radio: {   autocomplete: "off" }
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: unknown, state: ValidityState) => string)	-
disabled	Same as native disabled	boolean	-	false
id	Same as native id. Also set the for label for o-field wrapper - default is an uuid.	string	-	useId()
label	Input label, unnecessary when default slot is used	string	-
v-model	The input value state, use v-model to make it two-way binding	unknown	-
name	Same as native name	string	-
nativeValue	Same as native value	unknown	-
override	Override existing theme classes completely	boolean	-
required	Same as native required	boolean	-	false
size	Size of the control	string	small, medium, large	From config: radio: {   size: undefined }
useHtml5Validation	Enable html 5 native validation	boolean	-	From config: {   useHtml5Validation: true }
variant	Color of the control	string	primary, info, success, warning, danger, and any other custom color	From config: radio: {   variant: undefined }

Events

Event name	Properties	Description
update:modelValue	value string | number | boolean | object - updated modelValue prop	modelValue prop two-way binding
input	value string | number | boolean | object - input value event Event - native event	on input change event
focus	event Event - native event	on input focus event
blur	event Event - native event	on input blur event
invalid	event Event - native event	on input invalid event

Slots

Name	Description	Bindings
default	Override the label, default is label prop

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$radio-active-background-color	$primary
$radio-checked-box-shadow-length	0 0 0.5em
$radio-checked-box-shadow-opacity	0.8
$radio-box-shadow	$control-box-shadow
$radio-disabled-opacity	var(--#{$prefix}base-disabled-opacity)
$radio-label-padding	0 0 0 0.5em
$radio-margin-sibiling	0.5em
$radio-size	1rem
$radio-line-height	1.25

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$radio-colors	var.$colors
$radio-active-background-color	css.getVar("primary")
$radio-border-color	css.getVar("grey")
$radio-size	1.25em
$radio-shadow	css.getVar("shadow")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

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