Inputs
RadioGroup
A set of radio buttons, where only one button can be checked at a time.
import { Label } from "@/components/Label"import { RadioGroup, RadioGroupItem } from "@/components/RadioGroup"
export const RadioGroupHero = () => ( <div className="flex justify-center"> <RadioGroup> <div className="flex items-center gap-x-3"> <RadioGroupItem value="1" id="radio_1" /> <Label htmlFor="radio_1">First come first serve (FCFS)</Label> </div> <div className="flex items-center gap-x-3"> <RadioGroupItem value="2" id="radio_2" /> <Label htmlFor="radio_2">By appointment</Label> </div> <div className="flex items-center gap-x-3"> <RadioGroupItem value="3" id="radio_3" /> <Label htmlFor="radio_3">By time window</Label> </div> </RadioGroup> </div>)Installation
- 1
Install dependencies:
npm install @radix-ui/react-radio-group - 2
Add component:
Copy and paste the code into your project’s component directory. Do not forget to update the import paths.// Tremor Raw RadioGroup [v0.0.0] import React from "react"import * as RadioGroupPrimitives from "@radix-ui/react-radio-group" import { cx, focusRing } from "@/lib/utils" const RadioGroup = 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)} {...props} /> )})RadioGroup.displayName = "RadioGroup" const RadioGroupIndicator = React.forwardRef< React.ElementRef<typeof RadioGroupPrimitives.Indicator>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Indicator>>(({ className, ...props }, forwardedRef) => { return ( <RadioGroupPrimitives.Indicator ref={forwardedRef} className={cx("flex items-center justify-center", className)} {...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> )})RadioGroupIndicator.displayName = "RadioGroupIndicator" const RadioGroupItem = React.forwardRef< React.ElementRef<typeof RadioGroupPrimitives.Item>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Item>>(({ className, ...props }, forwardedRef) => { return ( <RadioGroupPrimitives.Item ref={forwardedRef} className={cx( "group relative flex size-4 appearance-none items-center justify-center outline-none", className, )} {...props} > <div className={cx( // base "flex size-4 shrink-0 items-center justify-center rounded-full border shadow-sm", // 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", "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, )} > <RadioGroupIndicator /> </div> </RadioGroupPrimitives.Item> )})RadioGroupItem.displayName = "RadioGroupItem" export { RadioGroup, RadioGroupItem }
Example: RadioGroup with legend
import { Label } from "@/components/Label"import { RadioGroup, RadioGroupItem } from "@/components/RadioGroup"
export const RadioGroupExample = () => ( <form className="flex justify-center"> <fieldset className="space-y-3"> <legend className="text-sm font-medium text-gray-900 dark:text-gray-50"> Select booking logic: </legend> <RadioGroup> <div className="flex items-center gap-x-3"> <RadioGroupItem value="1" id="radio_21" /> <Label htmlFor="radio_21">First come first serve (FCFS)</Label> </div> <div className="flex items-center gap-x-3"> <RadioGroupItem value="2" id="radio_22" /> <Label htmlFor="radio_22">By appointment</Label> </div> <div className="flex items-center gap-x-3"> <RadioGroupItem value="3" id="radio_23" /> <Label htmlFor="radio_23">By timewindow</Label> </div> </RadioGroup> </fieldset> </form>)Example: RadioGroup with label and description
Enhance your security by enabling Privacy Mode, which anonymizes all outgoing links to protect your data.
Optimize your site's speed by activating Performance Mode, ensuring faster load times and a smoother user experience.
Ensure maximum compatibility with legacy systems by selecting Compatibility Mode, ideal for broad audience reach.
import { Label } from "@/components/Label"import { RadioGroup, RadioGroupItem } from "@/components/RadioGroup"
export const RadioGroupLabelDescriptionExample = () => ( <RadioGroup className="flex flex-col gap-6"> <div className="flex items-start gap-x-3"> <RadioGroupItem value="1" id="radio_51" /> <div className="mt-px flex flex-col gap-y-2.5"> <Label className="text-sm font-semibold leading-none" htmlFor="radio_51" aria-describedby="radio_51-description" > Privacy Mode </Label> <p className="text-sm text-gray-500 dark:text-gray-500" id="radio_51-description" > Enhance your security by enabling Privacy Mode, which anonymizes all outgoing links to protect your data. </p> </div> </div> <div className="flex items-start gap-x-3"> <RadioGroupItem value="2" id="radio_52" /> <div className="mt-px flex flex-col gap-y-2.5"> <Label className="text-sm font-semibold leading-none" htmlFor="radio_52" aria-describedby="radio_52-description" > Performance Mode </Label> <p className="text-sm text-gray-500 dark:text-gray-500" id="radio_52-description" > Optimize your site's speed by activating Performance Mode, ensuring faster load times and a smoother user experience. </p> </div> </div> <div className="flex items-start gap-x-3"> <RadioGroupItem value="3" id="radio_53" /> <div className="mt-px flex flex-col gap-y-2.5"> <Label className="text-sm font-semibold leading-none" htmlFor="radio_53" aria-describedby="radio_53-description" > Compatibility Mode </Label> <p className="text-sm text-gray-500 dark:text-gray-500" id="radio_53-description" > Ensure maximum compatibility with legacy systems by selecting Compatibility Mode, ideal for broad audience reach. </p> </div> </div> </RadioGroup>)Example: RadioGroup with default selection
import { Label } from "@/components/Label"import { RadioGroup, RadioGroupItem } from "@/components/RadioGroup"
export const RadioGroupDefaultCheckedExample = () => ( <form className="flex justify-center"> <fieldset className="space-y-3"> <legend className="text-sm font-medium text-gray-900 dark:text-gray-50"> Select booking logic: </legend> <RadioGroup defaultValue="1"> <div className="flex items-center gap-x-3"> <RadioGroupItem value="1" id="radio_31" /> <Label htmlFor="radio_31">First come first serve (FCFS)</Label> </div> <div className="flex items-center gap-x-3"> <RadioGroupItem value="2" id="radio_32" /> <Label htmlFor="radio_32">By appointment</Label> </div> <div className="flex items-center gap-x-3"> <RadioGroupItem value="3" id="radio_33" /> <Label htmlFor="radio_33">By time window</Label> </div> </RadioGroup> </fieldset> </form>)Example: RadioGroup with disabled radio button
import { Label } from "@/components/Label"import { RadioGroup, RadioGroupItem } from "@/components/RadioGroup"
export const RadioGroupDisabledExample = () => ( <form className="flex justify-center"> <fieldset className="space-y-3"> <legend className="text-sm font-medium text-gray-900 dark:text-gray-50"> Select booking logic: </legend> <RadioGroup> <div className="flex items-center gap-x-3"> <RadioGroupItem value="1" id="radio_41" /> <Label htmlFor="radio_41">First come first serve (FCFS)</Label> </div> <div className="flex items-center gap-x-3"> <RadioGroupItem value="2" id="radio_42" /> <Label htmlFor="radio_42">By appointment</Label> </div> <div className="flex items-center gap-x-3"> <RadioGroupItem disabled value="3" id="radio_43" /> <Label disabled htmlFor="radio_43"> By time window </Label> </div> </RadioGroup> </fieldset> </form>)Example: RadioGroup with controlled state
Selected Opt: Nothing selected!
import React from "react"import { Button } from "@/components/Button"import { Label } from "@/components/Label"import { RadioGroup, RadioGroupItem } from "@/components/RadioGroup"
export const RadioGroupControlledExample = () => { const [selectedOption, setSelectedOption] = React.useState("")
return ( <div className="flex flex-col items-center justify-start"> <form> <fieldset className="space-y-3"> <legend className="text-sm font-medium text-gray-900 dark:text-gray-50"> Choose your preferred interior option: </legend> <RadioGroup value={selectedOption} onValueChange={(value) => { setSelectedOption(value) }} > <div className="flex items-center gap-x-3"> <RadioGroupItem value="1" id="radio_61" /> <Label htmlFor="radio_61">Leather Seats</Label> </div> <div className="flex items-center gap-x-3"> <RadioGroupItem value="2" id="radio_62" /> <Label htmlFor="radio_62">Fabric Seats</Label> </div> <div className="flex items-center gap-x-3"> <RadioGroupItem value="3" id="radio_63" /> <Label htmlFor="radio_63">Sport Seats</Label> </div> </RadioGroup> </fieldset> <Button className="mt-4" type="reset" variant="secondary" onClick={() => setSelectedOption("")} > 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: RadioGroup
This component uses the Radix UI API.
API Reference: RadioGroupItem
This component uses the Radix UI API.