Inputs
Radio Card Group
A set of radio buttons with a card styling.
"use client"
import { RadioCardGroup, RadioCardIndicator, RadioCardItem,} from "@/components/RadioCardGroup"
export const RadioCardsHero = () => ( <div className="mx-auto max-w-xs"> <RadioCardGroup> <RadioCardItem value="1"> <div className="flex items-start gap-3"> <RadioCardIndicator className="mt-1" /> <div> <span className="sm:text-sm">Base Performance</span> <p className="mt-1 text-xs text-gray-500">1/8 vCPU, 1 GB RAM</p> </div> </div> </RadioCardItem> <RadioCardItem value="2"> <div className="flex items-start gap-3"> <RadioCardIndicator className="mt-1" /> <div> <span className="sm:text-sm">Advanced Performance</span> <p className="mt-1 text-xs text-gray-500">1/4 vCPU, 2 GB RAM</p> </div> </div> </RadioCardItem> <RadioCardItem value="3"> <div className="flex items-start gap-3"> <RadioCardIndicator className="mt-1" /> <div> <span className="sm:text-sm">Turbo Performance</span> <p className="mt-1 text-xs text-gray-500">1/2 vCPU, 4 GB RAM</p> </div> </div> </RadioCardItem> </RadioCardGroup> </div>)Installation
npm install @radix-ui/react-radio-group- Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
// Tremor Radio Card [v0.0.3] import React from "react"import * as RadioGroupPrimitives from "@radix-ui/react-radio-group" import { cx, focusInput, focusRing } from "@/lib/utils" const RadioCardGroup = React.forwardRef< React.ElementRef<typeof RadioGroupPrimitives.Root>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Root>>(({ className, ...props }, forwardedRef) => { return ( <RadioGroupPrimitives.Root ref={forwardedRef} className={cx("grid gap-2", className)} tremor-id="tremor-raw" {...props} /> )}) RadioCardGroup.displayName = "RadioCardGroup" const RadioCardItem = React.forwardRef< React.ElementRef<typeof RadioGroupPrimitives.Item>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Item>>(({ className, children, ...props }, forwardedRef) => { return ( <RadioGroupPrimitives.Item ref={forwardedRef} className={cx( // base "group relative w-full rounded-md border p-4 text-left shadow-sm transition focus:outline-none", // background color "bg-white dark:bg-gray-950", // border color "border-gray-300 dark:border-gray-800", "data-[state=checked]:border-blue-500", "data-[state=checked]:dark:border-blue-500", // disabled "data-[disabled]:border-gray-100 data-[disabled]:dark:border-gray-800", "data-[disabled]:bg-gray-50 data-[disabled]:shadow-none data-[disabled]:dark:bg-gray-900", focusInput, className, )} {...props} > {children} </RadioGroupPrimitives.Item> )}) RadioCardItem.displayName = "RadioCardItem" const RadioCardIndicator = React.forwardRef< React.ElementRef<typeof RadioGroupPrimitives.Indicator>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Indicator>>(({ className, ...props }, forwardedRef) => { return ( <div className={cx( // base "relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-full border shadow-sm outline-none", // border color "border-gray-300 dark:border-gray-800", // background color "bg-white dark:bg-gray-950", // checked "group-data-[state=checked]:border-0 group-data-[state=checked]:border-transparent group-data-[state=checked]:bg-blue-500", // disabled "group-data-[disabled]:border-gray-300 group-data-[disabled]:bg-gray-100 group-data-[disabled]:text-gray-400", "group-data-[disabled]:dark:border-gray-700 group-data-[disabled]:dark:bg-gray-800", // focus focusRing, className, )} > <RadioGroupPrimitives.Indicator ref={forwardedRef} className={cx("flex items-center justify-center")} {...props} > <div className={cx( // base "size size-1.5 shrink-0 rounded-full", // indicator "bg-white", // disabled "group-data-[disabled]:bg-gray-400 group-data-[disabled]:dark:bg-gray-500", )} /> </RadioGroupPrimitives.Indicator> </div> )}) RadioCardIndicator.displayName = "RadioCardIndicator" export { RadioCardGroup, RadioCardIndicator, RadioCardItem }
Example: RadioCardGroup with Grid
"use client"
import { RadioCardGroup, RadioCardIndicator, RadioCardItem,} from "@/components/RadioCardGroup"
export const RadioCardGroupGridExample = () => ( <form className="mx-auto max-w-lg"> <fieldset className="space-y-3"> <legend className="text-sm font-medium text-gray-900 dark:text-gray-50"> Select job title: </legend> <RadioCardGroup className="grid-cols-2 text-sm"> <RadioCardItem value="1"> <div className="flex items-center gap-3"> <RadioCardIndicator /> <span>Software Engineer</span> </div> </RadioCardItem> <RadioCardItem value="2"> <div className="flex items-center gap-3"> <RadioCardIndicator /> <span>Platform Engineer</span> </div> </RadioCardItem> <RadioCardItem value="3"> <div className="flex items-center gap-3"> <RadioCardIndicator /> <span>Hardware Engineer</span> </div> </RadioCardItem> <RadioCardItem value="4"> <div className="flex items-center gap-3"> <RadioCardIndicator /> <span>Security</span> </div> </RadioCardItem> <RadioCardItem value="5"> <div className="flex items-center gap-3"> <RadioCardIndicator /> <span>Marketing Ops</span> </div> </RadioCardItem> <RadioCardItem value="6"> <div className="flex items-center gap-3"> <RadioCardIndicator /> <span>Product Manager</span> </div> </RadioCardItem> </RadioCardGroup> </fieldset> </form>)Example: RadioCardGroup with default selection
"use client"
import { RadioCardGroup, RadioCardIndicator, RadioCardItem,} from "@/components/RadioCardGroup"
export const RadioCardGroupDefaultCheckedExample = () => ( <form className="mx-auto max-w-sm"> <fieldset className="space-y-3"> <legend className="text-sm font-medium text-gray-900 dark:text-gray-50"> Select job title: </legend> <RadioCardGroup defaultValue="1" className="text-sm"> <RadioCardItem value="1" className="flex items-center gap-3"> <RadioCardIndicator /> <span>Software Engineer</span> </RadioCardItem> <RadioCardItem value="2" className="flex items-center gap-3"> <RadioCardIndicator /> <span>Plarform Engineer</span> </RadioCardItem> <RadioCardItem value="3" className="flex items-center gap-3"> <RadioCardIndicator /> <span>Hardware Engineer</span> </RadioCardItem> </RadioCardGroup> </fieldset> </form>)Example: RadioCardGroup with disabled radio card
"use client"
import { RadioCardGroup, RadioCardIndicator, RadioCardItem,} from "@/components/RadioCardGroup"
export const RadioCardGroupDisabledExample = () => ( <form className="mx-auto max-w-sm"> <fieldset className="space-y-3"> <legend className="text-sm font-medium text-gray-900 dark:text-gray-50"> Select job title: </legend> <RadioCardGroup defaultValue="1" className="text-sm"> <RadioCardItem value="1" className="flex items-center gap-3"> <RadioCardIndicator /> <span>Software Engineer</span> </RadioCardItem> <RadioCardItem value="2" className="flex items-center gap-3"> <RadioCardIndicator /> <span>Plarform Engineer</span> </RadioCardItem> <RadioCardItem disabled value="3" className="flex items-center gap-3"> <RadioCardIndicator /> <span>Hardware Engineer</span> </RadioCardItem> </RadioCardGroup> </fieldset> </form>)Example: RadioCardGroup with controlled state
Selected Opt: base-performance
"use client"
import React from "react"
import { Badge } from "@/components/Badge"import { Button } from "@/components/Button"import { Label } from "@/components/Label"import { RadioCardGroup, RadioCardIndicator, RadioCardItem,} from "@/components/RadioCardGroup"
export const RadioCardGroupControlledExample = () => { const [selectedOption, setSelectedOption] = React.useState("base-performance")
const databases: { label: string value: string description: string isRecommended: boolean }[] = [ { label: "Base performance", value: "base-performance", description: "1/8 vCPU, 1 GB RAM", isRecommended: true, }, { label: "Advanced performance", value: "advanced-performance", description: "1/4 vCPU, 2 GB RAM", isRecommended: false, }, { label: "Turbo performance", value: "turbo-performance", description: "1/2 vCPU, 4 GB RAM", isRecommended: false, }, ]
return ( <div className="flex flex-col items-center justify-start"> <form> <fieldset className="space-y-3"> <Label htmlFor="database" className="font-medium"> Database configuration </Label> <RadioCardGroup value={selectedOption} onValueChange={(value) => setSelectedOption(value)} className="mt-2 grid grid-cols-1 gap-4 text-sm md:grid-cols-2" > {databases.map((database) => ( <RadioCardItem key={database.value} value={database.value}> <div className="flex items-start gap-3"> <RadioCardIndicator className="mt-1" /> <div> {database.isRecommended ? ( <div className="flex items-center gap-2"> <span className="leading-6">{database.label}</span> <Badge>Recommended</Badge> </div> ) : ( <span className="leading-6">{database.label}</span> )} <p className="mt-1 text-xs text-gray-500"> 1/8 vCPU, 1 GB RAM </p> </div> </div> </RadioCardItem> ))} </RadioCardGroup> </fieldset> <Button className="mt-4" type="reset" variant="secondary" onClick={() => setSelectedOption("base-performance")} > Reset </Button> </form> <pre className="mt-6 w-fit rounded-md bg-gray-100 p-2 font-mono text-sm text-gray-700 dark:bg-gray-800 dark:text-gray-200"> Selected Opt: {selectedOption ? selectedOption : "Nothing selected!"} </pre> </div> )}API Reference: RadioCardGroup
This component uses the Radix UI API.
API Reference: RadioCardItem
This component uses the Radix UI API.
API Reference: RadioCardIndicator
This component uses the Radix UI API.