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

Classes

Accessibility

Radio Group

Example

Installation

Components

Props

Examples

Disabled

With Form

Styling

Classes

Accessibility