Inputs

Radio Group

A set of radio buttons, where only one button can be checked at a time.

Installation

  1. 1

    Install dependencies:

    npm install @radix-ui/react-radio-group
  2. 2

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor RadioGroup [v0.0.2]
    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)}      tremor-id="tremor-raw"      {...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-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

Select booking logic:

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.

Example: RadioGroup with default selection

Select booking logic:

Example: RadioGroup with disabled radio button

Select booking logic:

Example: RadioGroup with controlled state

Choose your preferred interior option:
Selected Opt: Nothing selected!

API Reference: RadioGroup

This component uses the Radix UI API.

API Reference: RadioGroupItem

This component uses the Radix UI API.