Overview
Forms & inputs
Design Systemv1.3.0Search documentation
Search for a command to run or a page to navigate to.
Design Systemv1.3.0Search for a command to run or a page to navigate to.
A set of mutually exclusive options where users can select only one choice.
"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>
)
}
import { RadioGroup } from "@strongtie/design-system/radio-group"Not installed yet? Add the package to your app:
npm install @strongtie/design-system
This module exports the following components:
RadioGroupRadioGroupItemAll components accept standard HTML attributes and React props.
"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>
)
}