Devie UI

First option

Second optionThird option

The Radio component extends Base UI's Radio. Radio buttons allow users to select a single option from a set of mutually exclusive choices. The RadioGroup component provides shared state management for a series of radio buttons.

Installation

Here is the component implementation code that you can copy to your project. You'll need both the Radio and RadioGroup components:

// https://base-ui.com/react/components/radio
 
import { Radio as BaseRadio } from "@base-ui-components/react/radio";
import clsx from "clsx";
import type { ReactNode } from "react";
import styles from "./Radio.module.scss";
 
interface RadioRootProps extends BaseRadio.Root.Props {
  className?: string;
}
 
function Root({ className, ...props }: RadioRootProps) {
  return <BaseRadio.Root className={clsx(styles.root, className)} {...props} />;
}
 
interface RadioIndicatorProps extends BaseRadio.Indicator.Props {
  className?: string;
  children?: ReactNode;
}
 
function Indicator({ className, children, ...props }: RadioIndicatorProps) {
  return (
    <BaseRadio.Indicator
      className={clsx(styles.indicator, className)}
      {...props}
    >
      {children || <DefaultIndicatorDot />}
    </BaseRadio.Indicator>
  );
}
 
function DefaultIndicatorDot() {
  return <div className={styles.dot} />;
}
 
const Radio = {
  Root,
  Indicator,
};
 
export default Radio;

Use Cases

Simple radio group

A basic radio group with labeled options. Each radio button is wrapped in a label element for accessibility, allowing users to click the label text to select the option.

AppleBananaOrange

Disabled state

Radio buttons can be disabled individually or as an entire group. When disabled, radios show reduced opacity and are not interactive.

<Radio />

Installation

Use Cases

Simple radio group

Disabled state