Fumadocs on TanStack Start

Overview

The BlockRadioGroup component provides large, card-style radio buttons ideal for presenting mutually exclusive options with titles and descriptions. It supports single selection with visual feedback through hover effects, border changes, and smooth transitions.

Import

import { BlockRadioGroup } from "@px-ui/core";

Usage

Standard Shipping

Delivery in 5-7 business days · Free

Express Shipping

Delivery in 2-3 business days · $9.99

<BlockRadioGroup.Group defaultValue="standard">
  <BlockRadioGroup.Item value="standard">
    <BlockRadioGroup.Header>
      <BlockRadioGroup.Title>Standard Shipping</BlockRadioGroup.Title>
    </BlockRadioGroup.Header>
    <BlockRadioGroup.Description>
      Delivery in 5-7 business days · Free
    </BlockRadioGroup.Description>
  </BlockRadioGroup.Item>

  <BlockRadioGroup.Item value="express">
    <BlockRadioGroup.Header>
      <BlockRadioGroup.Title>Express Shipping</BlockRadioGroup.Title>
    </BlockRadioGroup.Header>
    <BlockRadioGroup.Description>
      Delivery in 2-3 business days · $9.99
    </BlockRadioGroup.Description>
  </BlockRadioGroup.Item>
</BlockRadioGroup.Group>

Examples

With Icons

Add icons to headers for better visual recognition and hierarchy.

Free Plan

$0/month · Perfect for trying out our service

Pro Plan

$29/month · Advanced features and priority support

Enterprise Plan

Custom pricing · Tailored solutions for large organizations

<BlockRadioGroup.Item value="pro">
  <BlockRadioGroup.Header>
    <UserIcon />
    <BlockRadioGroup.Title>Pro Plan</BlockRadioGroup.Title>
  </BlockRadioGroup.Header>
  <BlockRadioGroup.Description>
    $29/month · Advanced features and priority support
  </BlockRadioGroup.Description>
</BlockRadioGroup.Item>

Payment Selection

A common use case for block-style radio groups is payment method selection.

Credit Card

Pay securely with your credit or debit card

PayPal

Fast and secure payment through your PayPal account

<BlockRadioGroup.Group defaultValue="card">
  <BlockRadioGroup.Item value="card">
    <BlockRadioGroup.Header>
      <CreditCardIcon />
      <BlockRadioGroup.Title>Credit Card</BlockRadioGroup.Title>
    </BlockRadioGroup.Header>
    <BlockRadioGroup.Description>
      Pay securely with your credit or debit card
    </BlockRadioGroup.Description>
  </BlockRadioGroup.Item>
  {/* More options... */}
</BlockRadioGroup.Group>

Anatomy

Components that make up BlockRadioGroup:

BlockRadioGroup.Group

The container component that manages radio group state for single selection.

Custom Props:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Inherited Props: Inherits all props from Base UI RadioGroup including value, defaultValue, onValueChange, disabled, etc.

BlockRadioGroup.Item

Large card-style radio button with hover and checked state styling.

Custom Props:

Prop	Type	Default	Description
`invalid`	`boolean`	`false`	When true, applies error styling with red shadow
`className`	`string`	-	Additional CSS classes

Inherited Props: Inherits all props from RadioGroup.Item including value, disabled, etc.

Features:

Minimum height of 155px for consistent card size
Hover border effect when not disabled
Primary border when checked
Red shadow when invalid
Reduced opacity when disabled

BlockRadioGroup.Header

Container for header content (typically icon and title).

Custom Props:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

BlockRadioGroup.Title

Title text for the radio option.

Custom Props:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

BlockRadioGroup.Description

Descriptive text explaining the radio option.

Custom Props:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

API Reference

See the Anatomy section above for detailed prop information for each component.

BlockRadioGroup

On this page