Update radio group component

This commit is contained in:
adilallo
2026-02-04 13:57:51 -07:00
parent 3f35e581b7
commit 0ebad759f9
3 changed files with 172 additions and 153 deletions
@@ -1,6 +1,7 @@
export interface RadioOption {
value: string;
label: string;
subtext?: string;
ariaLabel?: string;
}
@@ -21,6 +21,52 @@ export function RadioGroupView({
{options.map((option) => {
const isSelected = value === option.value;
// If there's subtext, render radio button without label and handle layout separately
if (option.subtext) {
return (
<div
key={option.value}
className="flex gap-[8px] items-start"
>
<RadioButton
checked={isSelected}
mode={mode}
state={state}
disabled={disabled}
name={groupId}
value={option.value}
ariaLabel={option.ariaLabel || option.label}
onChange={({ checked }) => {
if (checked) {
onOptionChange(option.value);
}
}}
/>
<div className="flex flex-col gap-[4px] flex-1">
<span
className={`font-inter text-[14px] leading-[20px] ${
mode === "inverse"
? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]"
}`}
>
{option.label}
</span>
<span
className={`font-inter text-[14px] leading-[20px] ${
mode === "inverse"
? "text-[var(--color-content-inverse-secondary,#1f1f1f)]"
: "text-[var(--color-content-default-secondary,#b4b4b4)]"
}`}
>
{option.subtext}
</span>
</div>
</div>
);
}
// If no subtext, use RadioButton's built-in label
return (
<RadioButton
key={option.value}