Radio

The input element with a type attribute whose value is "text" represents a one-line plain text edit control for the input element’s value.

Examples

Radio

Code

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

const options = [
  {
    label: 'Label 1',
    value: 'Value 1'
  },
  {
    label: 'Label 2',
    value: 'Value 2'
  },
  {
    label: 'Label 3',
    value: 'Value 3'
  }
]

const selected = ref()
</script>

<template>
  <form @submit.prevent="">
    <base-radio name="radio-option" :options="options" v-model="selected" />
  </form>
</template>

Label

Code

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

const options = [
  {
    label: 'Label 1',
    value: 'Value 1'
  },
  {
    label: 'Label 2',
    value: 'Value 2'
  },
  {
    label: 'Label 3',
    value: 'Value 3'
  }
]

const form = ref({
  selected1: null,
  selected2: null
})
</script>

<template>
  <form @submit.prevent="">
    <base-radio
      :options="options"
      v-model="form.selected1"
      label="Label"
      description="Vertical Layout"
      layout="vertical"
    />
    <base-radio
      :options="options"
      v-model="form.selected2"
      label="Label"
      description="Horizontal Layout"
      layout="horizontal"
    />
  </form>
</template>

Helper

Code

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

const options = [
  {
    label: 'Label 1',
    value: 'Value 1'
  },
  {
    label: 'Label 2',
    value: 'Value 2'
  },
  {
    label: 'Label 3',
    value: 'Value 3'
  }
]

const form = ref({
  selected1: null,
  selected2: null,
  selected3: null,
  selected4: null,
  selected5: options[0]
})

const errors = ref(['Error Example'])
</script>

<template>
  <form @submit.prevent="">
    <base-radio :options="options" v-model="form.selected1" label="Label" required />
    <base-radio
      :options="options"
      v-model="form.selected2"
      label="Label"
      description="Description example"
    />
    <base-radio
      :options="options"
      v-model="form.selected3"
      label="Label"
      :helpers="['Helper example']"
    />
    <base-radio :options="options" v-model="form.selected4" label="Label" v-model:errors="errors" />
    <base-radio
      :options="options"
      v-model="form.selected5"
      label="Label"
      description="Disabled"
      disabled
    />
  </form>
</template>

Using Slot

Code

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

const options = [
  {
    name: 'Startup',
    ram: '12GB',
    cpus: '6 CPUs',
    disk: '160 GB SSD disk'
  },
  {
    name: 'Business',
    ram: '16GB',
    cpus: '8 CPUs',
    disk: '512 GB SSD disk'
  },
  {
    name: 'Enterprise',
    ram: '32GB',
    cpus: '12 CPUs',
    disk: '1024 GB SSD disk'
  }
]

const selected = ref()
</script>

<template>
  <form @submit.prevent="">
    <base-radio v-model="selected" :options="options" label="Label" layout="horizontal">
      <template v-slot="{ checked, option }">
        <div class="w-full cursor-pointer">
          <div
            :class="[
              checked
                ? 'bg-blue-700 border-blue-700 text-white '
                : 'bg-white dark:bg-slate-700 dark:text-white text-slate-900 dark:border-slate-600'
            ]"
            class="border rounded p-4"
          >
            <div class="w-full flex space-x-4 items-center justify-between">
              <div class="flex flex-col">
                <div class="text-base font-semibold">{{ option.name }}</div>
                <div class="text-sm font-light">
                  {{ option.cpus }} - {{ option.ram }} - {{ option.disk }}
                </div>
              </div>
              <div v-show="checked" class="shrink-0 text-white">
                <base-icon icon="i-fas-circle-check" />
              </div>
            </div>
          </div>
        </div>
      </template>
    </base-radio>
  </form>
</template>

Input API

Types

export type BaseFormLayoutType = 'vertical' | 'horizontal'
export type BaseRadioOptionsLayout = 'vertical' | 'horizontal'

Props

Name	Type	Default	Description
v-model	Record<string, any> string number boolean null undefined		v-model is required.
v-model:errors	string[]		Input error message.
id	string		Input id.
label	string		Input label.
description	string		Input description.
layout	BaseFormLayoutType	vertical	Input layout.
optionsLayout	BaseRadioOptionsLayout	vertical	Input layout.
required	boolean	false	if true input is required.
disabled	boolean	false	if true input is disabled.
helpers	string[]		Input helper message.
options	Record<string, any>[]		Options to choose.
data-testid	string		Testing ID.

Slot

#default slot for rendering custom option

Automated Test Guide

If you pass a data-testid to the <base-radio> component, it will automatically generate unique data-testid attributes for testing.

For example, if you set data-testid="grade", the component will generate the following attributes:

Element	data-testid
Option with value = rank-1	grade-rank-1
Option with value = rank-2	grade-rank-2
Option with value = rank-3	grade-rank-3

Gherkin Scenario

When I click radio "grade-rank-1"

Step Definition

When('I click radio {string}', (selector: string) => {
  cy.get(`[data-testid="${selector}"]`).click()
})

Code Implementation

<script setup>
import { ref } from 'vue'

const radioOptions = [
  { label: 'Rank 1', value: 'rank-1' },
  { label: 'Rank 2', value: 'rank-2' },
  { label: 'Rank 3', value: 'rank-3' }
]
const radioSelected = ref()
</script>

<template>
  <base-radio :options="radioOptions" v-model="radioSelected" data-testid="grade" />
</template>