Appearance

Radio Group ​

Radio groups are a collection of radio options. Use this when only one entry is allowed in the form field.

Basic usage ​

Would you like to receive our newsletter?
Selected: —
template
<RadioGroup
  v-model="receiveNewsletter"
  label="Would you like to receive our newsletter?"
  name="newsletter"
>
  <RadioNew
    id="yes"
    label="Yes"
    value="yes"
  />
  <RadioNew
    id="no"
    label="No"
    value="no"
  />
</RadioGroup>

Variants ​

The RadioGroup component comes with four variants. You can set them via the variant property. The default value is radio.

Radio ​

Shirt size
template
<RadioGroup variant="radio" label="Shirt size">
  <RadioNew
    id="small"
    label="Small"
    value="sm"
  />
  <RadioNew
    id="medium"
    label="Medium"
    value="md"
  />
  <RadioNew
    id="large"
    label="Large"
    value="lg"
  />
</RadioGroup>

You can also customize the RadioNew component by leveraging the default slot of the RadioGroup component. This allows you to compose the RadioNew component with other components.

Priority
template
<RadioGroup variant="radio" label="Priority">
  <Card>
    <template #top-left>
      <RadioNew id="low" label="Low. This option designates tasks or items with a lower level of urgency or criticality, providing a more relaxed timeline for completion." value="low" />
    </template>
  </Card>
  <Card>
    <template #top-left>
      <RadioNew id="high" label="High. This choice signifies a commitment to addressing tasks or items with heightened urgency or critical importance promptly." value="high" />
    </template>
  </Card>
</RadioGroup>

Button ​

Preferred operating system
template
<RadioGroup variant="button" label="Preferred operating system">
  <RadioNew
    id="linux"
    label="Linux"
    value="linux"
  />
  <RadioNew
    id="macos"
    label="MacOS"
    value="macos"
  />
  <RadioNew
    id="windows"
    label="Windows"
    value="windows"
  />
</RadioGroup>

Chip ​

Availability
template
<RadioGroup variant="chip" label="Availability">
  <RadioNew
    id="monday"
    label="Monday"
    value="monday"
  />
  <RadioNew
    id="tuesday"
    label="Tuesday"
    value="tuesday"
  />
  <RadioNew
    id="wednesday"
    label="Wednesday"
    value="wednesday"
  />
  <RadioNew
    id="thursday"
    label="Thursday"
    value="thursday"
  />
  <RadioNew
    id="friday"
    label="Friday"
    value="friday"
  />
</RadioGroup>

Tile ​

Delivery method
template
<RadioGroup variant="tile" label="Delivery method">
  <RadioNew
    id="standard"
    label="Standard"
    value="standard"
  >
    <p>5 - 10 business days</p>
    <p>$10.00</p>
  </RadioNew>
  <RadioNew
    id="express"
    label="Express"
    value="express"
  >
    <p>3 - 5 business days</p>
    <p>$25.00</p>
  </RadioNew>
</RadioGroup>

Hint text and error states ​

You can provide hint text for a RadioGroup by using its hint-text prop.

Should I buy Ice Cream?
You know you want to.
template
<RadioGroup
  v-model="hintText"
  label="Should I buy Ice Cream?"
  name="icecream-hint"
  hint-text="You know you want to."
>
  <RadioNew id="yes" label="Yes" value="yes" />
  <RadioNew id="no" label="No" value="no" />
</RadioGroup>

If you provide error-text, the RadioGroup will display an error state, which overrides the hint text.

Vanilla or Chocolate?
You have to select one.
template
<RadioGroup
  v-model="errorText"
  label="Vanilla or Chocolate?"
  name="icecream-error"
  error-text="You have to select one."
>
  <RadioNew id="Vanilla" label="Vanilla" value="Vanilla" />
  <RadioNew id="Chocolate" label="Chocolate" value="Chocolate" />
</RadioGroup>

You can also leverage the <Field> component to add individual hint-text and/or error states to each radio element.

Vanilla or Chocolate?
Delicious classic flavor
Rich and indulgent
vue
<script setup>
  import Field from '../../../src/components/Field/Field.vue';
  import RadioGroup from '../../../src/components/RadioGroup/RadioGroup.vue';
  import RadioNew from '../../../src/components/RadioNew/RadioNew.vue';
</script>

<template>
  <RadioGroup label="Vanilla or Chocolate?" name="icecream-individual-hint">
    <Field>
      <template #hint>
        <span class="tw-ml-8">Delicious classic flavor</span>
      </template>

      <RadioNew id="Vanilla" label="Vanilla" value="Vanilla" />
    </Field>
    <Field>
      <template #hint>
        <span class="tw-ml-8">Rich and indulgent</span>
      </template>

      <RadioNew id="Chocolate" label="Chocolate" value="Chocolate" />
    </Field>
  </RadioGroup>
</template>

Disabled ​

You can indicate that a specific Radio option is disabled by setting its disabled prop.

template
<RadioGroup
  variant="radio"
  v-model="disabledRadios"
  name="radio-variant"
  class="tw-mb-3"
>
  <RadioNew
    v-for="option in ['one', 'two',]"
    :id="option"
    :label="option"
    :value="option"
    disabled
  />
</RadioGroup>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.