BaseRadio

BaseRadio provides an interface for an un-styled radio button. Use v-model to bind the radio to your data.

Radio buttons should always be paired with an associated label. BaseRadio leaves the details for that relationship to the developer.

Example usage

Each radio button should have a value. Developers can capture that value when the input is selected, by binding a reference with v-model.

OneTwoThreeFour

Selection: Three

<script setup>
import { ref } from 'vue'
import { BaseRadio } from '@ais-public/ais-components'

let options = ref(['One', 'Two', 'Three', 'Four'])
let selection = ref('Three')
</script>

<template>
  <div class="grid gap-4">
    <div class="flex gap-8 mx-4">
      <label v-for="option in options"
             class="text-lg font-semibold font-sans
                 flex gap-2.5 items-center">
        <BaseRadio v-model="selection"  :value="option" />
        <span>{{option}}</span>
      </label>
    </div>

    <div class="bg-ui-gray-50 border rounded p-4">
      Selection: {{selection}}
    </div>
  </div>
</template>

Props

value

The value prop is required and defines the value presented when the radio is checked.

modelValue

The modelValue prop works in conjunction with the event @update:modelValue to power v-model bindings.

name

Radio buttons are grouped when they share the same name. If your form will be submitted, you must specify the name prop. Related radio buttons should share the same name.

disabled

Boolean prop to disable the input element.