AisRadio

AisRadio is a branded radio button component that ensures a label is attached to the element.

Basic usage

Use the value and v-model props to define the value for a radio button and capture it when the element is selected. Radio buttons bound to the same v-model will naturally form a group. However, radio buttons that share a v-model, should also share a name. Traditional form submission is the main case where name is required but there are other behaviors like browser validation that expect the name as well.

One

Two

Three

Selection: Two

<template>
  <div class="grid gap-4">
    <div class="mx-4 flex gap-8 items-center">
      <AisRadio v-for="option in options"
        :value="option"
        v-model="selection"
        name="radio-example"
      >
        {{option}}
      </AisRadio>
    </div>
    <div class="bg-ui-gray-50 border rounded p-4">
      Selection: {{selection}}
    </div>
  </div>
</template>

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

  const selection = ref('Two')

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

Props

icon

AisRadio accepts an icon prop to display an icon alongside the radio button. icon will accept either a FontAwesome icon definition or a string for one of our standard icons.

User

Group

World

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

import { faGlobe } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'

let selection = ref('user')
library.add(faGlobe)
</script>

<template>
  <div class="mx-4 flex gap-8">
    <AisRadio icon="user" v-model="selection" value="user">User</AisRadio>
    <AisRadio icon="users" v-model="selection" value="group">Group</AisRadio>
    <AisRadio :icon="faGlobe" v-model="selection" value="world">World</AisRadio>
  </div>
</template>

size

Radio buttons accept a size property with the standard values of sm, md, and lg. Medium (md) is the default.

smmdlgxl2xl3xl

User

Group

World

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

import { faGlobe } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'

let selection = ref('group')
const selectedSize = ref('md')

library.add(faGlobe)
</script>

<template>
  <div class="grid gap-8">
    <AisSelect v-model="selectedSize"
               :options="['sm', 'md', 'lg', 'xl', '2xl', '3xl']"
               size="sm"
    />
    <div class="mx-4 flex gap-8">
      <AisRadio :size="selectedSize" icon="user" v-model="selection" value="user">User</AisRadio>
      <AisRadio :size="selectedSize" icon="users" v-model="selection" value="group">Group</AisRadio>
      <AisRadio :size="selectedSize" :icon="faGlobe" v-model="selection" value="world">World</AisRadio>
    </div>
  </div>
</template>

name

The name prop will set the name attribute on the input element. Radio buttons that share a name are linked together. When using v-for to create radio buttons for a list of values, it is important to specify a name. v-model will handle most of the functionality, but there are details like browser validation that expect name to be set.

disabled

Radio buttons accept a boolean disabled property. A disabled radio button is not clickable and is not submitted with its form.

Disabled radio button

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

let selection = ref('')
</script>

<template>
  <div class="mx-4 flex gap-6">
    <AisRadio v-model="selection" :disabled="true">
      Disabled radio button
    </AisRadio>
  </div>
</template>

required

The required prop marks the radio button as required and activates browser validation. If the radio button is required and part of a conceptual group, make sure each input in the group shares a name attribute. In a required, same-name group, one of the radio buttons must be selected. Validation behavior may vary by browser. In Firefox, the form submission event (in Vue) is blocked until a value is selected.