Dark Light
System
Default LBBW Jira Confluence Source Code
Share
Playground

Radio Group

<afp-radio-group> Since 1.0.0 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

Examples #

Label #

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

Dog Cat Bird

Hint #

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

Basic Premium Enterprise

Value #

Use the value attribute to set the initially selected radio.

JavaScript TypeScript Python

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)

Invalid #

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

USA Canada Mexico

Event Handling #

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

Credit Card PayPal Bank Transfer

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

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

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';
Share
Create a link with a predefined theme that is automatically applied when the generated link is opened. Default LBBW Presentation Mode
Abort Copy Link