Horizontal Radio Group

A radio group with options laid out horizontally in a row instead of a vertical stack

Display radio options in a horizontal layout for compact forms. Works best with 3-5 short-labeled options when vertical space is limited.

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/form-radio-horizontal.json

npx shadcn@latest add https://www.shadcn.io/r/form-radio-horizontal.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/form-radio-horizontal.json

bunx shadcn@latest add https://www.shadcn.io/r/form-radio-horizontal.json

Basic single-selection radio group

Card-style radio selection options

Radio options with explanatory text

Visual icon-based radio cards

Multiple checkbox selection group

Basic dropdown select form

Last updated on March 24, 2026

Was this page helpful?

Radio Cards Form

A radio group form with card-style options containing titles and descriptions

Visual Radio Cards

A radio group where each option is displayed as a visual card with an icon, title, and description