Radio

A Radio Button is a component that enables a user to select a single option from a set of choices.

Basic Usage

Radio Label 1

Radio Label 2

<template>
  <div class="spr-flex spr-flex-col spr-items-start spr-gap-2">
    <spr-radio id="radio1" v-model="radioModel" name="radio_name" value="value1">Radio Label 1</spr-radio>
    <spr-radio id="radio2" v-model="radioModel" name="radio_name" value="value2">Radio Label 2</spr-radio>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const radioModel = ref('');
</script>

Active

Radio Label 1

Radio Label 2

<template>
  <spr-radio id="radio1" v-model="radioModel" name="radio_name" value="value1">Radio Label 1</spr-radio>
  <spr-radio id="radio2" v-model="radioModel" name="radio_name" value="value2">Radio Label 2</spr-radio>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const radioModel = ref('value2');
</script>

Disabled

Add the disabled attribute to the <spr-radio> component to disable the radio button.

Radio Label 1

Radio Label 2

<template>
  <div class="spr-flex spr-flex-col spr-items-start spr-gap-2">
    <spr-radio id="disabledradio1" v-model="radioModel" name="radio_name" value="value1">Radio Label 1</spr-radio>
    <spr-radio id="disabledradio2" v-model="radioModel" name="radio_name" value="value2" disabled>
      Radio Label 2
    </spr-radio>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const radioModel = ref('');
</script>

API Reference

Name	Description	Type	Default
id	the id of the `input` element	string	-
name	the name attribute of the `input` element	string	-
disabled	if `true`, the component is disabled	boolean	false
value	the value of the component	any	-
bordered	Add border to the component	Boolean	false
fullWidth	Defines if component is fit-content or full width	Boolean	false

Product Uses