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.
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;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.
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