Radio Button Group

Usage

Select a planChoose the plan that suits your needs

starterFor individuals and small projects$5/mo

proFor growing teams and businesses$15/mo

enterpriseFor large organizations at scale$45/mo

"use client";

import { RadioButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Anatomy

Import the RadioButtonGroup component and access all parts using dot notation.

import { RadioButtonGroup } from "@thenamespace/uikit";

<RadioButtonGroup>
  <RadioButtonGroup.Item>
    <RadioButtonGroup.ItemIcon />
    <RadioButtonGroup.ItemContent />
    <RadioButtonGroup.Indicator />
  </RadioButtonGroup.Item>
</RadioButtonGroup>;

Delivery And Payment

Delivery method

Standard4-10 business days

$5.00

Express2-5 business days

$16.00

Super Fast1 business day

$25.00

Payment method

**** 0123Exp. on 01/2026

**** 8304Exp. on 06/2028

PayPalPay with PayPal

"use client";

import { RadioButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Subscription Plans

AnnualBilled at USD 99.99/year (US$ 8.33/month)

Save up to 50%Annual + ToolkitBilled at USD 149.99/year (US$ 12.50/month)

"use client";

import { CheckmarkCircle02Icon } from "@thenamespace/uikit/icons";
import { HugeiconsIcon } from "@thenamespace/uikit/icons";
import { RadioButtonGroup } from "@thenamespace/uikit";

Controlled

Select a planChoose the plan that suits your needs

starterFor individuals and small projects$5/mo

proFor growing teams and businesses$15/mo

enterpriseFor large organizations at scale$45/mo

Selected: pro

"use client";

import { useState } from "react";

import { RadioButtonGroup } from "@thenamespace/uikit";

Custom Indicator

Select a mailing list

newsletterLast message sent an hour ago621 users

existing customersLast message sent 2 weeks ago1,200 users

trial usersLast message sent 4 days ago2,740 users

"use client";

import { CheckmarkCircle02Icon } from "@thenamespace/uikit/icons";
import { HugeiconsIcon } from "@thenamespace/uikit/icons";
import { RadioButtonGroup } from "@thenamespace/uikit";

Disabled Group

Select a planPlan changes are temporarily unavailable.

starterFor individuals and small projects$5/mo

proFor growing teams and businesses$15/mo

enterpriseFor large organizations at scale$45/mo

"use client";

import { RadioButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Grid Layout

Delivery method

Standard4-10 business days

$5.00

Express2-5 business days

$16.00

Super Fast1 business day

$25.00

"use client";

import { RadioButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Icon Cards

Choose your workspace plan

StarterMost popular

$12 per monthFor freelancers and solo makers shipping fast.

Growth

$29 per monthFor small teams scaling their product.

Business

$59 per monthFor companies with advanced compliance needs.

Scale

$149 per monthDedicated infra, SLA, and custom integrations.

Enterprise

$299 per monthWhite-glove onboarding, custom contracts.

"use client";

import { RadioButtonGroup } from "@thenamespace/uikit";
import { Chip } from "@thenamespace/uikit/chip";
import { Description } from "@thenamespace/uikit/description";

No Indicator

Select a plan

starterFor individuals and small projects$5/mo

proFor growing teams and businesses$15/mo

enterpriseFor large organizations at scale$45/mo

"use client";

import { RadioButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Render Prop Children

Select a plan

starterFor individuals and small projects$5/mo

proFor growing teams and businesses$15/mo

enterpriseFor large organizations at scale$45/mo

"use client";

import { RadioButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

With Icons

Payment method

**** 0123Exp. on 01/2026

**** 8304Exp. on 06/2028

PayPalPay with PayPal

"use client";

import { RadioButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

With Ripple

Deploy region

US EastLowest latency for US-based usersus-east-1

EU WestCovers Western Europe and UKeu-west-1

Asia PacificOptimized for Asia-Pacific trafficap-south-1

"use client";

import { RadioButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

CSS Classes

Base Classes

.radio-button-group - Base RadioGroup container with flex layout

Layout Classes

.radio-button-group--grid - Grid layout mode

Element Classes

.radio-button-group__item - Card-like radio button with border and selection ring
.radio-button-group__indicator - Positioned top-right indicator (radio dot or custom icon)
.radio-button-group__item-content - Text/content area wrapping Radio.Content
.radio-button-group__item-icon - Leading icon container

Interactive States

Selected: [data-selected="true"] on .radio-button-group__item (accent ring)
Focus visible: :focus-visible or [data-focus-visible="true"] on .radio-button-group__item (focus ring)
Disabled: :disabled or [aria-disabled="true"] on .radio-button-group__item (reduced opacity)

CSS Variables

--radio-button-group-item-radius - Border radius of items (default: var(--radius-2xl))

API Reference

RadioButtonGroup

The root component. Wraps Namespace UIKit RadioGroup with card-style layout.

Prop	Type	Default	Description
`layout`	`'flex' \| 'grid'`	`'flex'`	Layout mode for items

Also supports all Namespace UIKit RadioGroup props.

RadioButtonGroup.Item

A selectable card wrapping Namespace UIKit Radio. Supports render prop children for accessing selection state.

Also supports all Namespace UIKit Radio props.

RadioButtonGroup.Indicator

Selection indicator positioned at the top-right of the item.

No children: renders the default Namespace UIKit radio dot (Control + Indicator)
With children: renders a custom icon that appears only when selected

Prop	Type	Default	Description
`children`	`ReactNode`	-	Custom indicator icon (shown when selected)

Also supports all native span HTML attributes.

RadioButtonGroup.ItemContent

Content area for title and description text. Wraps Namespace UIKit Radio.Content.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Content elements

Also supports all native div HTML attributes.

RadioButtonGroup.ItemIcon

Leading icon container.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Icon element

Also supports all native div HTML attributes.