Radio button

Radio buttons let people select one option from a set of options

Shadcn UI
design_services
Guidelines

Usage

Radio buttons are the recommended way to allow users to make a single selection from a list of options.

Instalation

Run the following command:

npm i @radix-ui/react-radio-group

Copy and paste the following code into your project.

'use client'

import * as React from 'react'
import * as RadioButtonPrimitive from '@radix-ui/react-radio-group'

import { cn } from '@/lib/utils'

const RadioButtonRoot = React.forwardRef<
  React.ElementRef<typeof RadioButtonPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioButtonPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioButtonPrimitive.Root
      className={cn('grid gap-2', className)}
      {...props}
      ref={ref}
    />
  )
})
RadioButtonRoot.displayName = RadioButtonPrimitive.Root.displayName

const RadioButtonItem = React.forwardRef<
  React.ElementRef<typeof RadioButtonPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioButtonPrimitive.Item>
>(({ className, children, ...props }, ref) => {
  return (
    <RadioButtonPrimitive.Item
      ref={ref}
      className={cn(
        'group aspect-square h-5 w-5 rounded-full border-2 border-outline ring-offset-surface focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/38 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-38 data-[state=checked]:border-primary disabled:data-[state=checked]:border-outline',
        className
      )}
      {...props}
    >
      <RadioButtonPrimitive.Indicator className="flex items-center justify-center data-[state=unchecked]:duration-100 data-[state=checked]:animate-in data-[state=unchecked]:animate-out data-[state=checked]:zoom-in-0 data-[state=unchecked]:zoom-out-0">
        <span className="h-2.5 w-2.5 rounded-full bg-primary group-disabled:bg-outline" />
      </RadioButtonPrimitive.Indicator>
    </RadioButtonPrimitive.Item>
  )
})
RadioButtonItem.displayName = RadioButtonPrimitive.Item.displayName

const RadioButton = Object.assign(RadioButtonRoot, {
  Item: RadioButtonItem,
})

export { RadioButton, RadioButtonItem }

Update the import paths to match your project setup.

Examples

Language

 
import { Label } from '@/components/ui/label'
import { RadioButton } from '@/components/ui/radio-button'

export const RadioButtonExample = () => {
  return (
    <div>
      <p className="text-label-lg mb-2">Language</p>
      <RadioButton defaultValue="spanish">
        <div className="flex items-center gap-x-4">
          <RadioButton.Item value="english" id="r1" />
          <Label htmlFor="r1">English</Label>
        </div>
        <div className="flex items-center gap-x-4">
          <RadioButton.Item value="spanish" id="r2" />
          <Label htmlFor="r2">Spanish</Label>
        </div>
        <div className="flex items-center gap-x-4">
          <RadioButton.Item value="chinese" id="r3" />
          <Label htmlFor="r3">Chinese (Mandarin)</Label>
        </div>
      </RadioButton>
    </div>
  )
}
arrow_back Menu Select arrow_forward