Radio

A Radio Button lets users select a single option from a group.

Use it within a Radio Button Group—individual usage is discouraged, as React may not track the checked state reliably outside a group.

Source Code

uikit-react-core

Color

You can use the color prop to style the color of the radio.

<div className="flex gap-sm">
  <HvRadio checked color="primary" />
  <HvRadio checked color="positive" />
  <HvRadio checked color="coral" />
  <HvRadio checked color="#c73aa8" />
</div>

<div className="flex gap-sm">
  <HvRadio checked color="primary" />
  <HvRadio checked color="positive" />
  <HvRadio checked color="coral" />
  <HvRadio checked color="#c73aa8" />
</div>

Label position

Use the labelPosition prop to change the position of the label.

Label on the left

Label on the right

<div className="flex flex-col gap-sm">
  <HvRadio label="Label on the left" labelPosition="left" />
  <HvRadio label="Label on the right" labelPosition="right" />
</div>

<div className="flex flex-col gap-sm">
  <HvRadio label="Label on the left" labelPosition="left" />
  <HvRadio label="Label on the right" labelPosition="right" />
</div>

Controlled

Controlled radio button. Clicking the Radio button 1 does nothing, while clicking Radio button 2 changes both inputs.

Radio 1

Radio 2

import { useState } from "react";


export default function Demo() {
  const [isChecked, setIsChecked] = useState(false);


  return (
    <div className="flex gap-xs">
      <HvRadio checked={isChecked} label="Radio 1" />
      <HvRadio
        checked={isChecked}
        onChange={(_, checked) => setIsChecked(checked)}
        label="Radio 2"
      />
    </div>
  );
}

import { useState } from "react";

export default function Demo() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <div className="flex gap-xs">
      <HvRadio checked={isChecked} label="Radio 1" />
      <HvRadio
        checked={isChecked}
        onChange={(_, checked) => setIsChecked(checked)}
        label="Radio 2"
      />
    </div>
  );
}

Radio

Color

Label position

Controlled

Related components