Examples
Examples
Basic Usage
A group of Radios is set up by setting a descriptive label for the group.
States
Every Radio within a Group supports a variety of different states.
Prefixes
Radios accept any content to be displayed as a decorative prefix such as images, texts, or other visual elements that help users to distinguish a group of options more clearly.
☝️ Watch out
The prefix is a decorative element only and should not contain any meaningful information necessary to understand or distinguish an option. Hence the content of a prefix isn't accessible to assistive technologies.
Help Text
The help text serves the purpose of guiding a user's decision by providing additional information.
A help text can either be passed as an attribute for simple string-based content or via a slot for rich formatted content.
Required and Optional
Adding a required or optional label helps users to be guided while filling out a form. Usually, only Radio Groups that are an exception to the majority of other form fields in a form are marked as required or optional. For example, a Radio Group is marked as "Required" when the majority of the fields in the same form are optional and vise versa.
Truncation
Radios can be forced into a single line without compromising accessibility. The full content of the label is still associated with the Radio and is displayed after a view seconds on hover gesture.
💡 Did you know
Truncating a radio even works when used in conjunction with a Prefix.
Hit Area
When used as part of a group inside a container, the usability of Radios can be improved by increasing their interactive hit area beyond the visible label covering the entire row. That allows users to make quick and easy selections across all options within a group without worrying about individual hit areas defined by varying label lengths.
Validation
A Radio Group's validity can either be determined automatically when used inside a form or can be controlled from outside based on custom rules and application business logic.
Inside a Form
Radio Groups seamlessly integrate into a form's validation workflows and validate when a form is submitted. When no custom validation message is provided, the Radio Group falls back to the browser's native validation message.
💡Did you know?
A Radio Group that contains required Radios expects one option to be selected. Setting one Radio as required has the same effect as setting all of them to be required.
Inside an application
The validity of a Radio Group can also be controlled from outside based on custom rules or other business logic of an application. When flagged as invalid, a Radio Group expects a descriptive validation message to be set alongside.
Disabled
An entire Group of Radios can be marked as disabled.
💡 Did you know?
It is also possible to disable individual Radios inside a Group.
Listening to Events
Radios support the most commonly used events.
💡 Did you know?
Some native events like change are blocked by the Shadow DOM boundary of the web component standard. Hence some of them are proxied through custom events.
Find out more: Form Input Events & API