Radio Tabs
Open in
Basic Example
Reactbasic-example.tsx
const [value, setValue] = useState("1")<RadioTabs value={value} onValueChange={setValue}>  <RadioTabsItem value="1">Option 1</RadioTabsItem>  <RadioTabsItem value="2">Option 2</RadioTabsItem>  <RadioTabsItem value="3">Option 3</RadioTabsItem></RadioTabs>
With More Options
Reactmore-options.tsx
const [value, setValue] = useState("daily")<RadioTabs value={value} onValueChange={setValue}>  <RadioTabsItem value="daily">Daily</RadioTabsItem>  <RadioTabsItem value="weekly">Weekly</RadioTabsItem>  <RadioTabsItem value="monthly">Monthly</RadioTabsItem>  <RadioTabsItem value="yearly">Yearly</RadioTabsItem></RadioTabs>
With Disabled Option
Reactdisabled-option.tsx
<RadioTabs defaultValue="email">  <RadioTabsItem value="email">Email</RadioTabsItem>  <RadioTabsItem value="sms" disabled>SMS</RadioTabsItem>  <RadioTabsItem value="push">Push</RadioTabsItem></RadioTabs>
With Descriptions
Reactwith-descriptions.tsx
const [value, setValue] = useState("pro")<RadioTabs value={value} onValueChange={setValue}>  <RadioTabsItem value="starter">    <RadioTabsItemLabel>Starter</RadioTabsItemLabel>    <RadioTabsItemDescription>Perfect for beginners</RadioTabsItemDescription>  </RadioTabsItem>  <RadioTabsItem value="pro">    <RadioTabsItemLabel>Pro</RadioTabsItemLabel>    <RadioTabsItemDescription>Best for professionals</RadioTabsItemDescription>  </RadioTabsItem>  <RadioTabsItem value="team">    <RadioTabsItemLabel>Team</RadioTabsItemLabel>    <RadioTabsItemDescription>Collaborate together</RadioTabsItemDescription>  </RadioTabsItem></RadioTabs>

Features

  • Built on Radix UI Radio Group primitives for accessibility
  • Composable architecture with separate label and description components
  • Multiple style variants (default, outline, highlight, primary, secondary)
  • Responsive with customizable stacking breakpoints
  • Support for disabled states
  • Automatic height adjustment when using descriptions
  • Smooth transitions and hover effects
  • Keyboard navigation and focus management
  • Fully typed with TypeScript

Component Props

RadioTabs

  • value - string - Currently selected value
  • onValueChange - (value: string) => void - Callback when value changes
  • defaultValue - string - Default selected value (uncontrolled)
  • stackAtBreakpoint - "sm" | "md" | "lg" | "xl" | "2xl" - Breakpoint at which tabs stack vertically
  • containerClassName - string - Additional classes for the container
  • className - string

RadioTabsItem

  • value - string (required) - The value for this radio item
  • disabled - boolean - Whether the item is disabled
  • variant - "default" | "outline" | "highlight" | "outline_highlight" | "primary" | "secondary" (default: "default")
  • className - string
  • children - React.ReactNode - Either simple text or RadioTabsItemLabel/Description components

RadioTabsItemLabel

  • children - React.ReactNode - The label content
  • className - string

RadioTabsItemDescription

  • children - React.ReactNode - The description content
  • className - string