Radio Group

<afp-radio-group>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

The Radio Group component allows users to select a single option from a set of predefined choices. It groups multiple radio buttons together, ensuring that only one option can be selected at a time.

Apple

Banana

Cherry

<afp-radio-group hidelabel>
  <afp-radio value="apple">Apple</afp-radio>
  <afp-radio value="banana">Banana</afp-radio>
  <afp-radio value="cherry" >Cherry</afp-radio>
</afp-radio-group>

<afp-radio-group hidelabel>
  <afp-radio [value]="'apple'">Apple</afp-radio>
  <afp-radio [value]="'banana'">Banana</afp-radio>
  <afp-radio [value]="'cherry'" >Cherry</afp-radio>
</afp-radio-group>

<AfpRadioGroup hidelabel>
  <AfpRadio value="apple">Apple</AfpRadio>
  <AfpRadio value="banana">Banana</AfpRadio>
  <AfpRadio value="cherry" >Cherry</AfpRadio>
</AfpRadioGroup>

<AfpRadioGroup hidelabel>
  <AfpRadio :value="'apple'">Apple</AfpRadio>
  <AfpRadio :value="'banana'">Banana</AfpRadio>
  <AfpRadio :value="'cherry'" >Cherry</AfpRadio>
</AfpRadioGroup>

Examples #

Label #

Use the label attribute or slot to provide a label for the radio group.

Dog

Cat

Bird

<afp-radio-group label="Select your favorite pet">
  <afp-radio value="dog">Dog</afp-radio>
  <afp-radio value="cat">Cat</afp-radio>
  <afp-radio value="bird">Bird</afp-radio>
</afp-radio-group>

<afp-radio-group [label]="'Select your favorite pet'">
  <afp-radio [value]="'dog'">Dog</afp-radio>
  <afp-radio [value]="'cat'">Cat</afp-radio>
  <afp-radio [value]="'bird'">Bird</afp-radio>
</afp-radio-group>

<AfpRadioGroup label="Select your favorite pet">
  <AfpRadio value="dog">Dog</AfpRadio>
  <AfpRadio value="cat">Cat</AfpRadio>
  <AfpRadio value="bird">Bird</AfpRadio>
</AfpRadioGroup>

<AfpRadioGroup :label="'Select your favorite pet'">
  <AfpRadio :value="'dog'">Dog</AfpRadio>
  <AfpRadio :value="'cat'">Cat</AfpRadio>
  <AfpRadio :value="'bird'">Bird</AfpRadio>
</AfpRadioGroup>

Hint #

Use the hint attribute to provide additional information below the radio group.

Basic

Premium

Enterprise

<afp-radio-group 
  label="Choose your subscription plan"
  hint="Select the plan that best fits your needs."
>
  <afp-radio value="basic">Basic</afp-radio>
  <afp-radio value="premium" disabled>Premium</afp-radio>
  <afp-radio value="enterprise">Enterprise</afp-radio>
</afp-radio-group>

<afp-radio-group 
  [label]="'Choose your subscription plan'"
  [hint]="'Select the plan that best fits your needs.'"
>
  <afp-radio [value]="'basic'">Basic</afp-radio>
  <afp-radio [value]="'premium'" disabled>Premium</afp-radio>
  <afp-radio [value]="'enterprise'">Enterprise</afp-radio>
</afp-radio-group>

<AfpRadioGroup 
  label="Choose your subscription plan"
  hint="Select the plan that best fits your needs."
>
  <AfpRadio value="basic">Basic</AfpRadio>
  <AfpRadio value="premium" disabled>Premium</AfpRadio>
  <AfpRadio value="enterprise">Enterprise</AfpRadio>
</AfpRadioGroup>

<AfpRadioGroup 
  :label="'Choose your subscription plan'"
  :hint="'Select the plan that best fits your needs.'"
>
  <AfpRadio :value="'basic'">Basic</AfpRadio>
  <AfpRadio :value="'premium'" disabled>Premium</AfpRadio>
  <AfpRadio :value="'enterprise'">Enterprise</AfpRadio>
</AfpRadioGroup>

Value #

Use the value attribute to set the initially selected radio.

JavaScript

TypeScript

Python

<afp-radio-group label="Preferred language" value="typescript">
  <afp-radio value="javascript">JavaScript</afp-radio>
  <afp-radio value="typescript">TypeScript</afp-radio>
  <afp-radio value="python">Python</afp-radio>
</afp-radio-group>

<afp-radio-group [label]="'Preferred language'" [value]="'typescript'">
  <afp-radio [value]="'javascript'">JavaScript</afp-radio>
  <afp-radio [value]="'typescript'">TypeScript</afp-radio>
  <afp-radio [value]="'python'">Python</afp-radio>
</afp-radio-group>

<AfpRadioGroup label="Preferred language" value="typescript">
  <AfpRadio value="javascript">JavaScript</AfpRadio>
  <AfpRadio value="typescript">TypeScript</AfpRadio>
  <AfpRadio value="python">Python</AfpRadio>
</AfpRadioGroup>

<AfpRadioGroup :label="'Preferred language'" :value="'typescript'">
  <AfpRadio :value="'javascript'">JavaScript</AfpRadio>
  <AfpRadio :value="'typescript'">TypeScript</AfpRadio>
  <AfpRadio :value="'python'">Python</AfpRadio>
</AfpRadioGroup>

Disabled #

Use the disabled attribute to render the radio group in a disabled state.

Pacific Standard Time (PST)

Mountain Standard Time (MST)

Eastern Standard Time (EST)

<afp-radio-group label="Select your timezone" disabled>
  <afp-radio value="pst">Pacific Standard Time (PST)</afp-radio>
  <afp-radio value="mst">Mountain Standard Time (MST)</afp-radio>
  <afp-radio value="est">Eastern Standard Time (EST)</afp-radio>
</afp-radio-group>

<afp-radio-group [label]="'Select your timezone'" disabled>
  <afp-radio [value]="'pst'">Pacific Standard Time (PST)</afp-radio>
  <afp-radio [value]="'mst'">Mountain Standard Time (MST)</afp-radio>
  <afp-radio [value]="'est'">Eastern Standard Time (EST)</afp-radio>
</afp-radio-group>

<AfpRadioGroup label="Select your timezone" disabled>
  <AfpRadio value="pst">Pacific Standard Time (PST)</AfpRadio>
  <AfpRadio value="mst">Mountain Standard Time (MST)</AfpRadio>
  <AfpRadio value="est">Eastern Standard Time (EST)</AfpRadio>
</AfpRadioGroup>

<AfpRadioGroup :label="'Select your timezone'" disabled>
  <AfpRadio :value="'pst'">Pacific Standard Time (PST)</AfpRadio>
  <AfpRadio :value="'mst'">Mountain Standard Time (MST)</AfpRadio>
  <AfpRadio :value="'est'">Eastern Standard Time (EST)</AfpRadio>
</AfpRadioGroup>

Invalid #

Use the invalid attribute to display an error message and style the radio accordingly.

USA

Canada

Mexico

<afp-radio-group label="Select your country" invalid="This field is required">
  <afp-radio value="usa">USA</afp-radio>
  <afp-radio value="canada">Canada</afp-radio>
  <afp-radio value="mexico">Mexico</afp-radio>
</afp-radio-group>

<afp-radio-group [label]="'Select your country'" [invalid]="'This field is required'">
  <afp-radio [value]="'usa'">USA</afp-radio>
  <afp-radio [value]="'canada'">Canada</afp-radio>
  <afp-radio [value]="'mexico'">Mexico</afp-radio>
</afp-radio-group>

<AfpRadioGroup label="Select your country" invalid="This field is required">
  <AfpRadio value="usa">USA</AfpRadio>
  <AfpRadio value="canada">Canada</AfpRadio>
  <AfpRadio value="mexico">Mexico</AfpRadio>
</AfpRadioGroup>

<AfpRadioGroup :label="'Select your country'" :invalid="'This field is required'">
  <AfpRadio :value="'usa'">USA</AfpRadio>
  <AfpRadio :value="'canada'">Canada</AfpRadio>
  <AfpRadio :value="'mexico'">Mexico</AfpRadio>
</AfpRadioGroup>

Event Handling #

Use the afp-value-changed event to detect when the selected radio changes.

Credit Card

PayPal

Bank Transfer

<afp-radio-group
  id="demo-radio-group"
  label="Payment method"
  hint="Event output: null"
>
  <afp-radio value="credit-card">Credit Card</afp-radio>
  <afp-radio value="paypal">PayPal</afp-radio>
  <afp-radio value="bank-transfer">Bank Transfer</afp-radio>
</afp-radio-group>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const group = document.querySelector('#demo-radio-group');

    group.addEventListener('afp-value-changed', event => {
      group.hint = `Event output: ${JSON.stringify(event.detail)}`;
    });
  });
</script>

<afp-radio-group
  [id]="'demo-radio-group'"
  [label]="'Payment method'"
  [hint]="'Event output: null'"
>
  <afp-radio [value]="'credit-card'">Credit Card</afp-radio>
  <afp-radio [value]="'paypal'">PayPal</afp-radio>
  <afp-radio [value]="'bank-transfer'">Bank Transfer</afp-radio>
</afp-radio-group>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const group = document.querySelector('#demo-radio-group');

    group.addEventListener('afp-value-changed', event => {
      group.hint = `Event output: ${JSON.stringify(event.detail)}`;
    });
  });
</script>

<AfpRadioGroup
  id="demo-radio-group"
  label="Payment method"
  hint="Event output: null"
>
  <AfpRadio value="credit-card">Credit Card</AfpRadio>
  <AfpRadio value="paypal">PayPal</AfpRadio>
  <AfpRadio value="bank-transfer">Bank Transfer</AfpRadio>
</AfpRadioGroup>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const group = document.querySelector('#demo-radio-group');

    group.addEventListener('afp-value-changed', event => {
      group.hint = `Event output: ${JSON.stringify(event.detail)}`;
    });
  });
</script>

<AfpRadioGroup
  :id="'demo-radio-group'"
  :label="'Payment method'"
  :hint="'Event output: null'"
>
  <AfpRadio :value="'credit-card'">Credit Card</AfpRadio>
  <AfpRadio :value="'paypal'">PayPal</AfpRadio>
  <AfpRadio :value="'bank-transfer'">Bank Transfer</AfpRadio>
</AfpRadioGroup>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const group = document.querySelector('#demo-radio-group');

    group.addEventListener('afp-value-changed', event => {
      group.hint = `Event output: ${JSON.stringify(event.detail)}`;
    });
  });
</script>

Layout #

Use the orientation attribute to set the layout of the radio group. Available orientations are vertical and horizontal.

Red

Blue

Green

Circle

Square

Triangle

<div class="afp-grid afp-align-center">
  <afp-radio-group orientation="vertical" label="Vertical layout">
    <afp-radio value="red">Red</afp-radio>
    <afp-radio value="blue">Blue</afp-radio>
    <afp-radio value="green">Green</afp-radio>
  </afp-radio-group>
  <afp-radio-group orientation="horizontal" label="Horizontal layout">
    <afp-radio value="circle">Circle</afp-radio>
    <afp-radio value="square">Square</afp-radio>
    <afp-radio value="triangle">Triangle</afp-radio>
  </afp-radio-group>
</div>

<div class="afp-grid afp-align-center">
  <afp-radio-group [orientation]="'vertical'" [label]="'Vertical layout'">
    <afp-radio [value]="'red'">Red</afp-radio>
    <afp-radio [value]="'blue'">Blue</afp-radio>
    <afp-radio [value]="'green'">Green</afp-radio>
  </afp-radio-group>
  <afp-radio-group [orientation]="'horizontal'" [label]="'Horizontal layout'">
    <afp-radio [value]="'circle'">Circle</afp-radio>
    <afp-radio [value]="'square'">Square</afp-radio>
    <afp-radio [value]="'triangle'">Triangle</afp-radio>
  </afp-radio-group>
</div>

<div class="afp-grid afp-align-center">
  <AfpRadioGroup orientation="vertical" label="Vertical layout">
    <AfpRadio value="red">Red</AfpRadio>
    <AfpRadio value="blue">Blue</AfpRadio>
    <AfpRadio value="green">Green</AfpRadio>
  </AfpRadioGroup>
  <AfpRadioGroup orientation="horizontal" label="Horizontal layout">
    <AfpRadio value="circle">Circle</AfpRadio>
    <AfpRadio value="square">Square</AfpRadio>
    <AfpRadio value="triangle">Triangle</AfpRadio>
  </AfpRadioGroup>
</div>

<div class="afp-grid afp-align-center">
  <AfpRadioGroup :orientation="'vertical'" :label="'Vertical layout'">
    <AfpRadio :value="'red'">Red</AfpRadio>
    <AfpRadio :value="'blue'">Blue</AfpRadio>
    <AfpRadio :value="'green'">Green</AfpRadio>
  </AfpRadioGroup>
  <AfpRadioGroup :orientation="'horizontal'" :label="'Horizontal layout'">
    <AfpRadio :value="'circle'">Circle</AfpRadio>
    <AfpRadio :value="'square'">Square</AfpRadio>
    <AfpRadio :value="'triangle'">Triangle</AfpRadio>
  </AfpRadioGroup>
</div>

Radio Card #

Use afp-radio-card components within the radio group to create more visually rich radio options.

Standard Delivery Delivery within 5-7 business days. Free

Express Delivery Delivery within 1-2 business days. $10.00

<afp-radio-group label="Select a delivery option" orientation="horizontal">
  <afp-radio-card value="standard">
    <div class="afp-cluster afp-align-center">
      <afp-icon name="truck"></afp-icon>
      <span class="afp-stack afp-gap-0">
        <b>Standard Delivery</b>
        Delivery within 5-7 business days.
        <afp-badge variant="success" appearance="outlined" size="small">Free</afp-badge>
      </span>
    </div>
  </afp-radio-card>
  <afp-radio-card value="standard">
    <div class="afp-cluster afp-align-center">
      <afp-icon name="rocket"></afp-icon>
      <span class="afp-stack afp-gap-0">
        <b>Express Delivery</b>
        Delivery within 1-2 business days.
        <afp-badge variant="info" size="small">$10.00</afp-badge>
      </span>
    </div>
  </afp-radio-card>
</afp-radio-group>

<afp-radio-group [label]="'Select a delivery option'" [orientation]="'horizontal'">
  <afp-radio-card [value]="'standard'">
    <div class="afp-cluster afp-align-center">
      <afp-icon [name]="'truck'"></afp-icon>
      <span class="afp-stack afp-gap-0">
        <b>Standard Delivery</b>
        Delivery within 5-7 business days.
        <afp-badge [variant]="'success'" [appearance]="'outlined'" [size]="'small'">Free</afp-badge>
      </span>
    </div>
  </afp-radio-card>
  <afp-radio-card [value]="'standard'">
    <div class="afp-cluster afp-align-center">
      <afp-icon [name]="'rocket'"></afp-icon>
      <span class="afp-stack afp-gap-0">
        <b>Express Delivery</b>
        Delivery within 1-2 business days.
        <afp-badge [variant]="'info'" [size]="'small'">$10.00</afp-badge>
      </span>
    </div>
  </afp-radio-card>
</afp-radio-group>

<AfpRadioGroup label="Select a delivery option" orientation="horizontal">
  <AfpRadioCard value="standard">
    <div class="afp-cluster afp-align-center">
      <AfpIcon name="truck"></AfpIcon>
      <span class="afp-stack afp-gap-0">
        <b>Standard Delivery</b>
        Delivery within 5-7 business days.
        <AfpBadge variant="success" appearance="outlined" size="small">Free</AfpBadge>
      </span>
    </div>
  </AfpRadioCard>
  <AfpRadioCard value="standard">
    <div class="afp-cluster afp-align-center">
      <AfpIcon name="rocket"></AfpIcon>
      <span class="afp-stack afp-gap-0">
        <b>Express Delivery</b>
        Delivery within 1-2 business days.
        <AfpBadge variant="info" size="small">$10.00</AfpBadge>
      </span>
    </div>
  </AfpRadioCard>
</AfpRadioGroup>

<AfpRadioGroup :label="'Select a delivery option'" :orientation="'horizontal'">
  <AfpRadioCard :value="'standard'">
    <div class="afp-cluster afp-align-center">
      <AfpIcon :name="'truck'"></AfpIcon>
      <span class="afp-stack afp-gap-0">
        <b>Standard Delivery</b>
        Delivery within 5-7 business days.
        <AfpBadge :variant="'success'" :appearance="'outlined'" :size="'small'">Free</AfpBadge>
      </span>
    </div>
  </AfpRadioCard>
  <AfpRadioCard :value="'standard'">
    <div class="afp-cluster afp-align-center">
      <AfpIcon :name="'rocket'"></AfpIcon>
      <span class="afp-stack afp-gap-0">
        <b>Express Delivery</b>
        Delivery within 1-2 business days.
        <AfpBadge :variant="'info'" :size="'small'">$10.00</AfpBadge>
      </span>
    </div>
  </AfpRadioCard>
</AfpRadioGroup>

Properties

Learn more about properties.

Name Description Reflects

value

Current value of the radio group

Type string

orientation

Orientation of the radio list (`horizontal` or `vertical`).

Type

AfpOrientation

Name	Description
`HORIZONTAL`	Horizontal layout orientation.
`VERTICAL`	Vertical layout orientation.

AfpOrientation

Default AfpOrientation.VERTICAL

hideLabel
hidelabel

Hides the label visually

Type boolean

label

Optional label displayed above the radio buttons.

Type string

hint

Hint footer property of radio group

Type string

invalid

Optional validation message shown instead of help text. When set, the radios receive `aria-invalid="true"`.

Type string

disabled

Disable the entire radio group

Type boolean

Default false

size

size of the radio.

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

Events

Learn more about events.

Name	Return	Description
`afp-value-changed`	`string`	Emitted when the value of the radio group changes.

Slots

Learn more about slots.

Name	Description
`default`	The default slot for `<afp-radio>` elements.
`label`	Slot for the radio group label.

Internationalization

Learn more about internationalization.

Key	Description
`radio-group.aria-label`	The default `aria-label` text for Radio Group.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component’s outer container.	`::part(base)`
`elements`	The wrapper around the radio elements.	`::part(elements)`
`label`	The text label of the group.	`::part(label)`
`hint`	The help text shown below the radios.	`::part(hint)`
`invalid`	The invalid/error message text.	`::part(invalid)`

CSS Custom Properties

Name	Description	Default
`--afp-input-error-message-color`	The color of the error message in the invalid/error state.	`--afp-color-error-500`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-radio

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/radio-group/radio-group.js';