Devie UI
Version: 2026-02-14

<Radio />

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://devie-ui.com/components/radio
// https://base-ui.com/react/components/radio
 
import { Radio as BaseRadio } from "@base-ui/react/radio";
import clsx from "clsx";
import styles from "./Radio.module.scss";
 
function Root({ className, ...props }: BaseRadio.Root.Props) {
  return <BaseRadio.Root className={clsx(styles.root, className)} {...props} />;
}
 
function Indicator({
  className,
  children,
  ...props
}: BaseRadio.Indicator.Props) {
  return (
    <BaseRadio.Indicator
      className={clsx(styles.indicator, className)}
      {...props}
    >
      {children || <DefaultIndicatorDot />}
    </BaseRadio.Indicator>
  );
}
 
function DefaultIndicatorDot() {
  return <div className={styles.dot} />;
}
 
const Radio = {
  Root,
  Indicator,
};
 
namespace Radio {
  export namespace Root {
    export type Props = BaseRadio.Root.Props;
    export type State = BaseRadio.Root.State;
  }
  export namespace Indicator {
    export type Props = BaseRadio.Indicator.Props;
  }
}
 
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.

Disabled state

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

Individual disabled

Entire group disabled