Ui3nRadioGroup

Radio button and radio group components for single selection from multiple options.

Ui3nRadio

Single radio button component.

Props

Name	Type	Default	Description
id	string | undefined	—	Root element id
name	string | undefined	—	HTML name attribute for form submission (used if radio is outside a group)
modelValue	Ui3nRadioValue | undefined	false	Current radio value
checkedValue	Ui3nRadioValue | undefined	true	Value when radio is checked
uncheckedValue	Ui3nRadioValue | undefined	false	Value when radio is unchecked
size	string | number | undefined	"16"	Radio size
color	string | undefined	"var(--color-icon-control-accent-default)"	Radio color
disabled	boolean | undefined	false	Whether radio is disabled

Events

Event Name	Arguments / Value Type	Description
update:modelValue	value: Ui3nRadioValue	—
change	value: Ui3nRadioValue	—

Slots

Slot Name	Scope Props (v-slot)	Description
#checkedIcon	—	Checked icon slot
#uncheckedIcon	—	Unchecked icon slot
#default	—	Default slot

Public Methods & Exposes

Method Name	Signature / Type	Description
clear()	() => void	—

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-radio-color-disabled	var(--color-icon-control-primary-disabled)
--ui3n-radio-min-height	24px
--ui3n-radio-size	16px

Ui3nRadioGroup

Radio group component for managing multiple radio buttons.

Props

Name	Type	Default	Description
id	string | undefined	—	Root element id
name*	string	—	Radio group name
modelValue*	Ui3nRadioValue	—	Current radio group value
direction	"horizontal" | "vertical" | undefined	"vertical"	Radio group direction
disabled	boolean | undefined	false	Whether radio group is disabled

Events

Event Name	Arguments / Value Type	Description
update:modelValue	value: Ui3nRadioValue	—
change	value: Ui3nRadioValue	—

Slots

Slot Name	Scope Props (v-slot)	Description
#default	—	Default slot

Public Methods & Exposes

Method Name	Signature / Type	Description
clear()	() => void	—

Usage Examples

Simple radio

Simple radio

Basic radio button usage

I accept the user license agreement

Agreement state: Rejected

Radio group

Radio group

Radio buttons grouped together

Apple

Banana

Cherry

Selected: apple

Horizontal radio group

Horizontal radio group

Radio group with horizontal direction

Red

Green

Blue

Selected: red

Custom icons slot

Custom icons slot

Radio buttons with custom icons for checked and unchecked states using slots

I love this design

Public visibility active

Selected value: like