RadioGroup

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

Preview
Code

Radio1

Radio2

Radio3

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/radio-group

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  RadioGroupRoot,
  RadioGroupItem,
  RadioGroupIndicator,
  RadioGroupIcon,
  RadioGroupLabel,
} from '@melio-ui/radio-group';

RadioGroupRoot: All parts of the radio group are included.
RadioGroupItem: A checkable group item with an input for proper event propagation in forms.
RadioGroupIndicator: Renders when the radio item is checked, allowing direct styling or use as an icon wrapper.
RadioGroupIcon: Indicates whether the status is checked or unchecked.
RadioGroupLabel: Display text.

Another way to import

'use client';

import { RadioGroup } from '@melio-ui/radio-group';

<RadioGroup.Root>
  <RadioGroup.Item value="1">
    <RadioGroup.Indicator>
      <RadioGroup.Icon />
    </RadioGroup.Indicator>
    <RadioGroup.Label>radio1</RadioGroup.Label>
  </RadioGroup.Item>

  <RadioGroup.Item value="2">
    <RadioGroup.Indicator>
      <RadioGroup.Icon />
    </RadioGroup.Indicator>
    <RadioGroup.Label>radio2</RadioGroup.Label>
  </RadioGroup.Item>
</RadioGroup.Root>;

'use client' must be used when rendering on the server side.

API Reference

RadioGroupRoot

All parts of the radio group are included.

Prop	Type	Default	Description
orientation	`TypeAttributes.Orientation "horizontal" \| "vertical"`	-	Direction for the placement of the RadioGroup component.
disabled	`boolean`	-	Determines whether the radio group is inactive.
onValueChange	`(value: RadioValue) => void RadioValue: string \| number`	-	This is an event handler that is triggered when the state of a radio group changes.

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"

RadioGroupItem

A checkable group item with an input for proper event propagation in forms.

Prop	Type	Default	Description
checked	`boolean`	-	Set whether to check or not.
defaultChecked	`boolean`	-	The checked state of the radio item when it is first rendered. Use this when there is no need to control the checked state.
disabled	`boolean`	-	Determines whether the radio item is inactive.
inputProps	`React. InputHTMLAttributes <HTMLInputElement>`	-	Attributes assigned to the input element.

Data attribute	Values
[data-state]	"checked" \| "unchecked"
[data-disabled]	Visible when disabled
[data-readonly]	Visible when read-only

RadioGroupIndicator

Renders when the radio item is checked, allowing direct styling or use as an icon wrapper.

Prop	Type	Default	Description
children*	`React.ReactNode \| (checked: boolean) => React.ReactNode`	-	Elements rendered when a radio is checked.

Data attribute	Values
[data-state]	"checked" \| "unchecked"

RadioGroupIcon

Indicates whether the status is checked or unchecked.

Prop	Type	Default	Description
checkedIcon	`React.ReactNode`	-	Icon that indicates the checked status.
uncheckedIcon	`React.ReactNode`	-	Icon that indicates the unchecked status.

RadioGroupLabel

Display text.

Data attribute	Values
[data-state]	"checked" \| "unchecked"

Examples

defaultChecked

<RadioGroupRoot>
  <RadioGroupItem value="1">
    <RadioGroupIndicator>
      <RadioGroupIcon />
    </RadioGroupIndicator>
    <RadioGroupLabel>Radio1</RadioGroupLabel>
  </RadioGroupItem>

  <RadioGroupItem value="2" defaultChecked>
    <RadioGroupIndicator>
      <RadioGroupIcon />
    </RadioGroupIndicator>
    <RadioGroupLabel>Radio2</RadioGroupLabel>
  </RadioGroupItem>

  <RadioGroupItem value="3">
    <RadioGroupIndicator>
      <RadioGroupIcon />
    </RadioGroupIndicator>
    <RadioGroupLabel>Radio3</RadioGroupLabel>
  </RadioGroupItem>
</RadioGroupRoot>

disabled

<RadioGroupRoot>
  <RadioGroupItem value="1">
    <RadioGroupIndicator>
      <RadioGroupIcon />
    </RadioGroupIndicator>
    <RadioGroupLabel>Radio1</RadioGroupLabel>
  </RadioGroupItem>

  <RadioGroupItem value="2" disabled>
    <RadioGroupIndicator>
      <RadioGroupIcon />
    </RadioGroupIndicator>
    <RadioGroupLabel>Radio2</RadioGroupLabel>
  </RadioGroupItem>

  <RadioGroupItem value="3">
    <RadioGroupIndicator>
      <RadioGroupIcon />
    </RadioGroupIndicator>
    <RadioGroupLabel>Radio3</RadioGroupLabel>
  </RadioGroupItem>
</RadioGroupRoot>

Indicator children function

function IndicatorFunc() {
  return (
    <RadioGroupRoot>
      <RadioGroupItem value="1">
        <RadioGroupIndicator>
          {(checked: boolean) => {
            if (checked) return <CheckedUserIcon />;
            return <UncheckedUserIcon />;
          }}
        </RadioGroupIndicator>
        <RadioGroupLabel>User1</RadioGroupLabel>
      </RadioGroupItem>

      <RadioGroupItem value="2">
        <RadioGroupIndicator>
          {(checked: boolean) => {
            if (checked) return <CheckedUserIcon />;
            return <UncheckedUserIcon />;
          }}
        </RadioGroupIndicator>
        <RadioGroupLabel>User2</RadioGroupLabel>
      </RadioGroupItem>

      <RadioGroupItem value="3">
        <RadioGroupIndicator>
          {(checked: boolean) => {
            if (checked) return <CheckedUserIcon />;
            return <UncheckedUserIcon />;
          }}
        </RadioGroupIndicator>
        <RadioGroupLabel>User3</RadioGroupLabel>
      </RadioGroupItem>
    </RadioGroupRoot>
  );
}

render(<IndicatorFunc />);

function CheckedUserIcon() {
  return (
    <svg
      width="2em"
      height="2em"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
        fill="#00A8FF"
      />
    </svg>
  );
}

function UncheckedUserIcon() {
  return (
    <svg
      width="2em"
      height="2em"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
        fill="#cacdcf"
      />
    </svg>
  );
}

Checked/Unchecked Icon

function CustomRadioIcon() {
  return (
    <RadioGroupRoot>
      <RadioGroupItem value="1">
        <RadioGroupIndicator>
          <RadioGroupIcon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
        </RadioGroupIndicator>
        <RadioGroupLabel>User1</RadioGroupLabel>
      </RadioGroupItem>

      <RadioGroupItem value="2">
        <RadioGroupIndicator>
          <RadioGroupIcon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
        </RadioGroupIndicator>
        <RadioGroupLabel>User2</RadioGroupLabel>
      </RadioGroupItem>

      <RadioGroupItem value="3">
        <RadioGroupIndicator>
          <RadioGroupIcon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
        </RadioGroupIndicator>
        <RadioGroupLabel>User3</RadioGroupLabel>
      </RadioGroupItem>
    </RadioGroupRoot>
  );
}

render(<CustomRadioIcon />);

function CheckedUserIcon() {
  return (
    <svg
      width="2em"
      height="2em"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
        fill="#00A8FF"
      />
    </svg>
  );
}

function UncheckedUserIcon() {
  return (
    <svg
      width="2em"
      height="2em"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
        fill="#cacdcf"
      />
    </svg>
  );
}

Orientation

<RadioGroupRoot orientation="vertical">
  <RadioGroupItem value="1">
    <RadioGroupIndicator>
      <RadioGroupIcon />
    </RadioGroupIndicator>
    <RadioGroupLabel>Radio1</RadioGroupLabel>
  </RadioGroupItem>

  <RadioGroupItem value="2">
    <RadioGroupIndicator>
      <RadioGroupIcon />
    </RadioGroupIndicator>
    <RadioGroupLabel>Radio2</RadioGroupLabel>
  </RadioGroupItem>

  <RadioGroupItem value="3">
    <RadioGroupIndicator>
      <RadioGroupIcon />
    </RadioGroupIndicator>
    <RadioGroupLabel>Radio3</RadioGroupLabel>
  </RadioGroupItem>
</RadioGroupRoot>

Progress

Slider