ComponentsRadio Group
RadioGroup
A group of radio buttons. A radio group is a type of selection list that can only have a single entry checked at any one time.
<HvRadioGroup label="Visualization type" description="Select how you want to visualize your dataset" orientation="vertical" required disabled={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>
States
Oh no!
<div className="flex gap-xs items-start"> <HvRadioGroup required label="Required"> <HvRadio label="Radio 1" value="1" /> <HvRadio label="Radio 2" value="2" checked /> <HvRadio label="Radio 3" value="3" /> </HvRadioGroup> <HvRadioGroup disabled label="Disabled"> <HvRadio label="Radio 1" value="1" /> <HvRadio label="Radio 2" value="2" checked /> <HvRadio label="Radio 3" value="3" /> </HvRadioGroup> <HvRadioGroup readOnly label="Readonly"> <HvRadio label="Radio 1" value="1" /> <HvRadio label="Radio 2" value="2" checked /> <HvRadio label="Radio 3" value="3" /> </HvRadioGroup> <HvRadioGroup status="invalid" statusMessage="Oh no!" label="Invalid"> <HvRadio label="Radio 1" value="1" /> <HvRadio label="Radio 2" value="2" checked /> <HvRadio label="Radio 3" value="3" /> </HvRadioGroup> <HvRadioGroup label="Mixed"> <HvRadio label="Radio 1" value="1" /> <HvRadio label="Radio 2" value="2" disabled /> <HvRadio label="Radio 3" value="3" semantic checked /> </HvRadioGroup> </div>
Controlled
Controlled radio button group. Choosing the first option will result in an invalid state of the Radio group.
import { useState } from "react"; export default function Demo() { const [value, setValue] = useState<string>("2"); const [status, setStatus] = useState<HvFormStatus>("standBy"); const handleOnChange = ( _: React.ChangeEvent<HTMLInputElement>, newValue: string, ) => { setValue(newValue); if (newValue === "none") { setStatus("invalid"); } else { setStatus("valid"); } }; return ( <HvRadioGroup label="Choose the best radio button" value={value} onChange={handleOnChange} status={status} statusMessage={'Don\'t select "None"!'} > <HvRadio label="None" value="none" /> <HvRadio label="Radio 1" value="1" /> <HvRadio label="Radio 2" value="2" /> </HvRadioGroup> ); }