RadioGroup

A radio group is a type of selection list that can only have a single entry checked at any one time.

Source Code

uikit-react-core

Controlled

Controlled radio button group. Choosing the first option will result in an invalid state of the Radio group.

Choose the best radio button

None

Radio 1

Radio 2

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState("2");
  const [status, setStatus] = useState<HvFormStatus>("standBy");


  return (
    <HvRadioGroup
      label="Choose the best radio button"
      value={value}
      status={status}
      statusMessage={'Don\'t select "None"!'}
      onChange={(evt, newValue) => {
        setValue(newValue);
        setStatus(newValue === "none" ? "invalid" : "valid");
      }}
    >
      <HvRadio label="None" value="none" />
      <HvRadio label="Radio 1" value="1" />
      <HvRadio label="Radio 2" value="2" />
    </HvRadioGroup>
  );
}

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState("2");
  const [status, setStatus] = useState<HvFormStatus>("standBy");

  return (
    <HvRadioGroup
      label="Choose the best radio button"
      value={value}
      status={status}
      statusMessage={'Don\'t select "None"!'}
      onChange={(evt, newValue) => {
        setValue(newValue);
        setStatus(newValue === "none" ? "invalid" : "valid");
      }}
    >
      <HvRadio label="None" value="none" />
      <HvRadio label="Radio 1" value="1" />
      <HvRadio label="Radio 2" value="2" />
    </HvRadioGroup>
  );
}

RadioGroup

Controlled

Related components