ComponentsRadio GroupRadioGroupA radio group is a type of selection list that can only have a single entry checked at any one time.GitHub LogoSource CodeNPM Logouikit-react-coreUsagePropsClasses Type*Visualization typeBar ChartLine ChartPie ChartlabeldescriptionorientationverticalhorizontalrequireddisabledreadOnly<HvRadioGroup label="Type" description="Visualization type" orientation="vertical" required disabled={false} readOnly={false} defaultChecked={false} > <No Display Name label="Bar Chart" value="1" /> <No Display Name label="Line Chart" value="2" /> <No Display Name label="Pie Chart" value="3" /> </HvRadioGroup> <HvRadioGroup label="Type" description="Visualization type" orientation="vertical" required disabled={false} readOnly={false} defaultChecked={false} > <No Display Name label="Bar Chart" value="1" /> <No Display Name label="Line Chart" value="2" /> <No Display Name label="Pie Chart" value="3" /> </HvRadioGroup> Controlled Controlled radio button group. Choosing the first option will result in an invalid state of the Radio group. Show CodeChoose the best radio buttonNoneRadio 1Radio 2import { 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> ); } Related components HvFormElement HvSelectionList HvRadio RadioScroll to Horizontal