Radio Group

A set of checkable buttons where only one can be checked at a time.

Default

A basic radio group with three options.

Sizes

Radio buttons come in three sizes.

Small

Default

Large

Horizontal Layout

Radio group can be displayed horizontally.

Disabled

Radio buttons can be disabled individually or as a group.

With Description

Radio options with additional description text. Click anywhere on the card to select.

Form Example

A typical form with a radio group for selecting notification preferences.

Notify me about...

Open Markdown
FreeRadio Group

Single-choice form groups.

Install with the Proa CLI
proa ui add radio_group

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
recipe.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: MIT OR Apache-2.0

//! Radio Group recipe — typed root axes and named compound slots.

use crate::tw_join;
use proa_core::shared::attr_value::AttrValue;
use proa_core::{DataLoader, WebContext, WriteBuf, WriteError};

/// Size of each radio item.
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, proa_macros::ProaVariant)]
#[variant(name = "size")]
pub enum RadioGroupSize {
    Sm,
    #[default]
    Default,
    Lg,
}

impl RadioGroupSize {
    pub const fn as_str(self) -> &'static str {
        match self {

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal