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

I have read and agree to the terms and conditions

required

disabled

semantic

<HvRadio 
  required
  disabled={false}
  semantic={false}
  label="I have read and agree to the terms and conditions"
  statusMessage="Please accept the terms and conditions"
  defaultChecked={false}
  indeterminate={false}
/>

<HvRadio 
  required
  disabled={false}
  semantic={false}
  label="I have read and agree to the terms and conditions"
  statusMessage="Please accept the terms and conditions"
  defaultChecked={false}
  indeterminate={false}
/>

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>
  );
}

Query Builder Radio Group

Radio

Controlled

Related components