jio-radio

Props

Prop name	Description	Type	Values	Default
id	An ID must be supplied	string	-
name	The ID of the radio collection to which this radio belongs	string	-
value	The value associated with this radio	string	-
required	Whether the radio must be selected @values true, false	boolean	-
isInvalid	Whether validation determined the radio state is invalid @values true, false	boolean	-
inline	Whether the radio should render inline @values true, false	boolean	-
disabled	Whether the radio is disabled @values true, false	boolean	-
theme	The desired palette @values "primary", "secondary"	Theme	-	"primary"

Slots

Name	Description	Bindings
default

---

View on Gitlab

General

This component is based on the Bootstrap radio.

View design in Figma

Code examples

Two simple radios.

<template> <div class="jio-core"> <jio-form> <jio-radio id="example-0-0" value="radio-0" v-model="selection" name="radio" inline > <jio-form-label forId="example-0-0" hideRequiredHint isCheck> Radio 0 </jio-form-label> </jio-radio> <jio-radio id="example-0-1" value="radio-1" v-model="selection" name="radio" inline > <jio-form-label forId="example-0-1" hideRequiredHint isCheck> Radio 1 </jio-form-label> </jio-radio> </jio-form> <jio-form> <!-- Disabled --> <jio-radio id="example-0-0" value="radio-0" v-model="selection" name="radio" inline disabled > <jio-form-label forId="example-0-0" hideRequiredHint isCheck> Radio 0 </jio-form-label> </jio-radio> <jio-radio id="example-0-1" value="radio-1" v-model="selection" name="radio" inline disabled > <jio-form-label forId="example-0-1" hideRequiredHint isCheck> Radio 1 </jio-form-label> </jio-radio> </jio-form> <jio-form> <jio-radio id="example-0-0" value="radio-0" v-model="selection" name="radio" inline > </jio-radio> <jio-radio id="example-0-1" value="radio-1" v-model="selection" name="radio" inline > </jio-radio> </jio-form> </div> </template> <script setup lang="ts"> const selection = "radio-0"; </script>