Migrating from ghl-ui Radio to HighRise Radio

This guide migrates UIRadio to HLRadio, including size mapping and event changes.

Component Implementation Changes

Import Changes

- import { UIRadio } from '@gohighlevel/ghl-ui'
+ import { HLRadio } from '@platform-ui/highrise'

Basic Usage

- <UIRadio id="option-a" value="a" v-model:value="selected">A</UIRadio>
+ <HLRadio id="option-a" :value="'a'" v-model:checked="selectedValue === 'a'" @update:checked="val => selectedValue = val ? 'a' : selectedValue">A</HLRadio>

For grouped radios, use the HL radio group component when available; otherwise manage checked state in parent as above.

Props Changes

ghl-ui Prop	HighRise Prop	Notes
id (required)	id (optional)	HL auto-generates if not provided; set for accessibility/testing
value	value	Same meaning
name	name	Same
label	label	Same
checked	checked	Same
disabled	disabled	Same
size (small/medium/large, default large)	size (lg/md/sm/xs/2xs/3xs; default md via form/group fallback)	Map large→md, medium→sm, small→xs
-	onlyIcon	HL-only; renders radio without text spacing
-	radioInputProps	Forwarded native input props

Emits Changes

ghl-ui Event	HighRise Event	Notes
change	change	Same event signature
checked	-	Not emitted; use update:checked
update:value	-	Use update:checked instead
-	update:checked	Main two-way binding event

Slots Changes

ghl-ui Slot	HighRise Slot	Notes
default	default	Same for label content

Size Mapping

ghl-ui Size	HighRise Size
large	md
medium	sm
small	xs
(unset)	md (group/form fallback)

Breaking Changes

1. v-model differences — HL uses checked/update:checked; there is no update:value event.
2. Size tokens — map small/medium/large to HighRise sizes; default is md via group/form.
3. id optional — HL auto-generates; set explicitly for deterministic testing.

Best Practices

1. In radio groups, bind a single value in the parent and set checked/@update:checked per option.
2. Map sizes during migration to avoid unexpected density changes.
3. Provide id (even though optional) for accessibility and tests.

MCPs: swap update:value/checked events for update:checked; map sizes large/medium/small → md/sm/xs; set id explicitly when you need stable selectors.