Radio

17:06

Description

A radio group for single-choice from a set of options. ux-radio-group groups the options, binds the selected value via v-model, and centrally controls shape / size / active-color / disabled; ux-radio is a single option identified by name (or value), with label as the display text.

Compatibility

Platform	Support
App	✅ Supported
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Basic Usage

Bind the selected value with v-model; only one can be selected within the same group.

View source

<template>
    <ux-radio-group v-model="value">
        <ux-radio label="荔枝" name="荔枝" />
        <ux-radio label="香蕉" name="香蕉" />
        <ux-radio label="橙子" name="橙子" />
    </ux-radio-group>
</template>

<script setup lang="uts">
const value = ref<string>('荔枝');
</script>

Shape

shape="circle" is circular, shape="square" is a square (3px small radius).

View source

<template>
    <ux-radio-group v-model="value" shape="square">
        <ux-radio label="荔枝" name="荔枝" />
        <ux-radio label="香蕉" name="香蕉" />
    </ux-radio-group>
</template>

<script setup lang="uts">
const value = ref<string>('荔枝');
</script>

Size

Supports small / default / large presets and custom values (in px); with a numeric size, the icon and label scale to 0.6 and 0.8 of it.

View source

<template>
    <ux-radio-group v-model="value" size="large">
        <ux-radio label="荔枝" name="荔枝" />
        <ux-radio label="香蕉" name="香蕉" />
    </ux-radio-group>
</template>

<script setup lang="uts">
const value = ref<string>('荔枝');
</script>

Active Color

Set the selected color via active-color, which overrides the group color.

View source

<template>
    <ux-radio-group v-model="value" active-color="#19be6b">
        <ux-radio label="荔枝" name="荔枝" />
        <ux-radio label="香蕉" name="香蕉" />
    </ux-radio-group>
</template>

<script setup lang="uts">
const value = ref<string>('荔枝');
</script>

Disabled

Disable a single radio via disabled, or disable all via the group's disabled.

View source

<template>
    <ux-radio-group v-model="value">
        <ux-radio label="荔枝" name="荔枝" :disabled="true" />
        <ux-radio label="香蕉" name="香蕉" />
    </ux-radio-group>
</template>

<script setup lang="uts">
const value = ref<string>('香蕉');
</script>

API

Props

ux-radio-group

Property	Description	Type	Default	Version
customStyle	Custom root element style	string | UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
modelValue	Bound value; the name/value of the selected radio	string | number	''	-
disabled	Whether to disable all radios	boolean	false	-
labelDisabled	Whether to disable tapping the label to select	boolean	false	-
shape	Shape	'circle' | 'square'	'circle'	-
activeColor	Color of the selected state	string	''	-
size	Overall component size	string | number	''	-
iconSize	Icon size	string | number	''	-
width	Width of each radio	string	'auto'	-
wrap	Whether to wrap each radio onto its own line	boolean	false	-

ux-radio

Property	Description	Type	Default	Version
customStyle	Custom root element style	string | UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
label	Radio label	string	''	-
name	Radio identifier	string | number	''	-
value	Radio value	string | number	''	-
shape	Shape: circle – round, square – square	'circle' | 'square'	-	-
disabled	Whether disabled	boolean	-	-
labelDisabled	Whether to disable tapping the label to select	boolean	-	-
activeColor	Color of the selected state; overrides the group's active-color	string	-	-
iconSize	Icon size, in px	string | number	-	-
labelSize	Label font size	string | number	''	-
size	Overall component size	string | number	-	-

Events

ux-radio-group

Event	Description	Params	Version
change	Fires when any radio's state changes; the callback is the selected value	value: string | number	-

ux-radio

Event	Description	Params	Version
change	Fires when this radio's state changes; the callback is the selected value	value: string | number	-

Slots

ux-radio-group

Slot	Description	Version
default	Place ux-radio children here	-

ux-radio

Slot	Description	Version
default	Custom label content (defaults to the label text)	-

Notes

• ux-radio must be placed inside ux-radio-group to be grouped and participate in selection; used standalone it does not link with other radios.
• The selected value is kept by the group's v-model; ux-radio matches it by name (or value when set) — keep their types consistent with the bound value.
• ux-radio's disabled, label-disabled, size, icon-size, active-color override the same options on the group.
• When ux-radio's size resolves to a size preset (including numeric), label-size is ignored and the font size comes from that preset.
• When label-disabled is true, tapping the label does not toggle; only tapping the icon does.