Strongtie Design System
Getting StartedComponents

Command Palette

Search for a command to run...

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Code Quality Setup
  • Migration Guide
  • Resources
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tree
Guides
  • Framework Recommendations
Foundations
  • States
  • Variables
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Command
  • Combobox
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. Components
  5. Radio Group

Radio Group

PreviousNext

A set of mutually exclusive options where users can select only one choice.

Radio groups present a collection of options where selecting one option automatically deselects any previously selected option. They're ideal for scenarios where users must make a single choice from a small set of mutually exclusive options, typically between two and seven options.

Example

"use client"

import { Label } from "@strongtie/design-system/label"
import {
  RadioGroup,
  RadioGroupItem,
} from "@strongtie/design-system/radio-group"

export function RadioGroupDefault() {
  return (
    <RadioGroup
      defaultValue="comfortable"
      className="flex flex-col gap-2 space-y-2"
    >
      <div className="flex items-center gap-1 space-x-2">
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center gap-1 space-x-2">
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
      <div className="flex items-center gap-1 space-x-2">
        <RadioGroupItem value="compact" id="r3" />
        <Label htmlFor="r3">Compact</Label>
      </div>
    </RadioGroup>
  )
}

Installation

npm install @strongtie/design-system
import { RadioGroup } from "@strongtie/design-system/radio-group"

Components

This module exports the following components:

  • RadioGroup
  • RadioGroupItem

Props

All components accept standard HTML attributes and React props.

Examples

"use client"

import { Label } from "@strongtie/design-system/label"
import {
  RadioGroup,
  RadioGroupItem,
} from "@strongtie/design-system/radio-group"

export function RadioGroupDefault() {
  return (
    <RadioGroup
      defaultValue="comfortable"
      className="flex flex-col gap-2 space-y-2"
    >
      <div className="flex items-center gap-1 space-x-2">
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center gap-1 space-x-2">
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
      <div className="flex items-center gap-1 space-x-2">
        <RadioGroupItem value="compact" id="r3" />
        <Label htmlFor="r3">Compact</Label>
      </div>
    </RadioGroup>
  )
}

Disabled

"use client"

import { Label } from "@strongtie/design-system/label"
import {
  RadioGroup,
  RadioGroupItem,
} from "@strongtie/design-system/radio-group"

export function RadioGroupDisabled() {
  return (
    <RadioGroup defaultValue="option-1" disabled>
      <div className="flex flex-col gap-4">
        <div className="flex items-center space-x-2">
          <RadioGroupItem value="option-1" id="disabled-1" />
          <Label htmlFor="disabled-1">Disabled Option 1</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioGroupItem value="option-2" id="disabled-2" />
          <Label htmlFor="disabled-2">Disabled Option 2</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioGroupItem value="option-3" id="disabled-3" />
          <Label htmlFor="disabled-3">Disabled Option 3</Label>
        </div>
      </div>
    </RadioGroup>
  )
}

With Form

"use client"

import * as React from "react"
import { Button } from "@strongtie/design-system/button"
import { Label } from "@strongtie/design-system/label"
import {
  RadioGroup,
  RadioGroupItem,
} from "@strongtie/design-system/radio-group"

export function RadioGroupWithForm() {
  const [submitted, setSubmitted] = React.useState<string | null>(null)

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const paymentMethod = formData.get("payment-method") as string
    setSubmitted(paymentMethod)
  }

  return (
    <div className="space-y-4">
      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="flex flex-col gap-2 space-y-4">
          <Label className="mb-2">Select Payment Method</Label>
          <RadioGroup
            defaultValue="card"
            name="payment-method"
            required
            className="flex flex-col gap-2"
          >
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="card" id="payment-card" />
              <Label htmlFor="payment-card">Credit Card</Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="paypal" id="payment-paypal" />
              <Label htmlFor="payment-paypal">PayPal</Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="apple" id="payment-apple" />
              <Label htmlFor="payment-apple">Apple Pay</Label>
            </div>
          </RadioGroup>
        </div>
        <Button type="submit">Submit</Button>
      </form>
      {submitted && (
        <p className="text-muted-foreground text-sm">
          Selected payment method: <strong>{submitted}</strong>
        </p>
      )}
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

  • radio-group
  • radio-group-item

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

ProgressScroll Area

On This Page

ExampleInstallationComponentsPropsExamplesDisabledWith FormStylingClassesAccessibility

Contribute

  • Report an issue
  • Request a feature
  • Edit this page