Radio Group

A radio group is a collection of Radio buttons where only one choice can be selected.

For Radio buttons to function correctly they must be slotted inside Radio Group component.

Labelling

Radio Label Text

Use the label attribute to provide a visible label for the Radio.

Radio Group Label Text

Use the label to set the Radio Group label.

If a visible label can’t be used, provide one using the

aria-label

attribute. This ensures screen readers announce the purpose of the element, making it accessible to all users.

<script setup lang="ts">
import { VRadio, VRadioGroup } from '@vonage/vivid-api-vue';
</script>

<template>
  <VRadioGroup label="Pick a number" name="number">
    <VRadio label="Number one" value="1" />
    <VRadio label="Number two" value="2" />
    <VRadio label="Number three" value="3" />
  </VRadioGroup>
</template>

<vwc-radio-group label="Pick a number" name="number">
  <vwc-radio label="Number one" value="1"></vwc-radio>
  <vwc-radio label="Number two" value="2"></vwc-radio>
  <vwc-radio label="Number three" value="3"></vwc-radio>
</vwc-radio-group>

Helper Text

The helper-text attribute provides additional information to help the user enter the correct information.

To add HTML to the helper text, use the helper-text slot.

<script setup lang="ts">
import { VRadio, VRadioGroup } from '@vonage/vivid-api-vue';
</script>

<template>
  <VRadioGroup helper-text="Please choose wisely" label="Pick a number" name="number">
    <VRadio label="Number one" value="1" />
    <VRadio label="Number two" value="2" />
    <VRadio label="Number three" value="3" />
  </VRadioGroup>
</template>

<vwc-radio-group helper-text="Please choose wisely" label="Pick a number" name="number">
  <vwc-radio label="Number one" value="1"></vwc-radio>
  <vwc-radio label="Number two" value="2"></vwc-radio>
  <vwc-radio label="Number three" value="3"></vwc-radio>
</vwc-radio-group>

Error Text

The error-text attribute provides a custom error message.

<script setup lang="ts">
import { VRadio, VRadioGroup } from '@vonage/vivid-api-vue';
</script>

<template>
  <VRadioGroup error-text="Please, select one of the options" label="Pick a number" name="number">
    <VRadio label="Number one" value="1" />
    <VRadio label="Number two" value="2" />
    <VRadio label="Number three" value="3" />
  </VRadioGroup>
</template>

<vwc-radio-group error-text="Please, select one of the options" label="Pick a number" name="number">
  <vwc-radio label="Number one" value="1"></vwc-radio>
  <vwc-radio label="Number two" value="2"></vwc-radio>
  <vwc-radio label="Number three" value="3"></vwc-radio>
</vwc-radio-group>

Orientation

Set the orientation member to set the orientation (horizontal or vertical) of the radio-group.

Type: horizontal | vertical
Default: horizontal

<script setup lang="ts">
import { VRadio, VRadioGroup } from '@vonage/vivid-api-vue';
</script>

<template>
  <VRadioGroup label="Pick a number" name="number" orientation="vertical">
    <VRadio label="1" value="1" />
    <VRadio label="2" value="2" />
    <VRadio label="3" value="3" />
  </VRadioGroup>
</template>

<vwc-radio-group label="Pick a number" name="number" orientation="vertical">
  <vwc-radio label="1" value="1"></vwc-radio>
  <vwc-radio label="2" value="2"></vwc-radio>
  <vwc-radio label="3" value="3"></vwc-radio>
</vwc-radio-group>

Connotation

Use the connotation attribute to set the Radio color.

<script setup lang="ts">
import { VRadio, VRadioGroup } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="wrapper">
    <VRadioGroup label="radio accent connotation">
      <VRadio connotation="accent" label="accent radio" />
      <VRadio connotation="accent" label="accent radio" default-checked />
    </VRadioGroup>
    <VRadioGroup label="radio accent connotation">
      <VRadio connotation="cta" label="cta radio" />
      <VRadio connotation="cta" label="cta radio" default-checked />
    </VRadioGroup>
  </div>
</template>

<style>
.wrapper {
  display: flex;
  gap: 48px;
}
</style>

<div class="wrapper">
  <vwc-radio-group label="radio accent connotation">
    <vwc-radio connotation="accent" label="accent radio"></vwc-radio>
    <vwc-radio connotation="accent" label="accent radio" checked></vwc-radio>
  </vwc-radio-group>
  <vwc-radio-group label="radio accent connotation">
    <vwc-radio connotation="cta" label="cta radio"></vwc-radio>
    <vwc-radio connotation="cta" label="cta radio" checked></vwc-radio>
  </vwc-radio-group>
</div>

<style>
  .wrapper {
    display: flex;
    gap: 48px;
  }
</style>

States

Checked

Use the checked on the Radio to mark the radio as selected.

In Vue, the equivalent of the checked attribute is default-checked.

<script setup lang="ts">
import { VRadio, VRadioGroup } from '@vonage/vivid-api-vue';
</script>

<template>
  <VRadioGroup label="who is checked?">
    <VRadio default-checked label="I am checked on load" value="checked" />
    <VRadio label="I am not checked on load" value="not-checked-1" />
    <VRadio label="I am not checked on load" value="not-checked-2" />
  </VRadioGroup>
</template>

<vwc-radio-group label="who is checked?">
  <vwc-radio checked label="I am checked on load" value="checked"></vwc-radio>
  <vwc-radio label="I am not checked on load" value="not-checked-1"></vwc-radio>
  <vwc-radio label="I am not checked on load" value="not-checked-2"></vwc-radio>
</vwc-radio-group>

Disabled

Set the disabled attribute on a single Radio button.

<script setup lang="ts">
import { VRadio, VRadioGroup } from '@vonage/vivid-api-vue';
</script>

<template>
  <VRadioGroup label="Pick a number" name="number">
    <VRadio disabled label="1" value="1" />
    <VRadio label="2" value="2" />
    <VRadio label="3" value="3" />
  </VRadioGroup>
</template>

<vwc-radio-group label="Pick a number" name="number">
  <vwc-radio disabled label="1" value="1"></vwc-radio>
  <vwc-radio label="2" value="2"></vwc-radio>
  <vwc-radio label="3" value="3"></vwc-radio>
</vwc-radio-group>

Set the disabled attribute to disable all radio buttons in the Radio Group.

<script setup lang="ts">
import { VRadio, VRadioGroup } from '@vonage/vivid-api-vue';
</script>

<template>
  <VRadioGroup disabled label="Pick a number" name="number">
    <VRadio label="1" value="1" default-checked />
    <VRadio label="2" value="2" />
    <VRadio label="3" value="3" />
  </VRadioGroup>
</template>

<vwc-radio-group disabled label="Pick a number" name="number">
  <vwc-radio label="1" value="1" checked></vwc-radio>
  <vwc-radio label="2" value="2"></vwc-radio>
  <vwc-radio label="3" value="3"></vwc-radio>
</vwc-radio-group>

Readonly

Set the readonly attribute to specify that the Radio Group is read-only.
A read-only radio-group cannot be modified but can be focused and tabbed into.
Radio can not have a read-only state.

<script setup lang="ts">
import { VRadio, VRadioGroup } from '@vonage/vivid-api-vue';
</script>

<template>
  <VRadioGroup label="Pick a number" name="number" readonly>
    <VRadio label="1" value="1" default-checked />
    <VRadio label="2" value="2" />
    <VRadio label="3" value="3" />
  </VRadioGroup>
</template>

<vwc-radio-group label="Pick a number" name="number" readonly>
  <vwc-radio label="1" value="1" checked></vwc-radio>
  <vwc-radio label="2" value="2"></vwc-radio>
  <vwc-radio label="3" value="3"></vwc-radio>
</vwc-radio-group>