Radio Group

Default

Comfortable

Compact

"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>
  )
}

Default

Comfortable

Compact

"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 Option 1

Disabled Option 2

Disabled Option 3

"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>
  )
}

"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>
  )
}

Radio Group

Example

Installation

Components

Props

Examples

Disabled

With Form

Styling

Component Slots

Additional Classes

Accessibility

Resources

Radio Group

Example

Installation

Components

Props

Examples

Disabled

With Form

Styling

Component Slots

Additional Classes

Accessibility

Resources