Introduction

The radio component is used to make a single selection from a group of options. It supports types such as circular radio, capsule radio, list radio, and card radio (new style), and is suitable for scenarios such as forms, filtering, and option selection. Combined with fs-radio-group, you can implement grouping, horizontal/vertical arrangement, and radio control.

Usage

Local import. Configure it in the index.json of the page or component where it is needed:

"usingComponents": {
  "fs-radio": "ava-ui/fxui/fs-radio/index",
  "fs-radio-group": "ava-ui/fxui/fs-radio-group/index"
}

Code Demonstrations

Type (type property)

Status

Arrangement Direction (direction property)

Maximum Width (maxWidth property)

Maximum Lines (maxLines property)

Custom Style (extStyle property)

Event Triggering Mechanism

Demonstrates the event triggering behavior of fs-radio in different usage scenarios:

---

API

fs-radio-group Properties

Property	Description	Type	Possible Values	Default
value	Current selected value	any	—	—
direction	Arrangement direction	string	row/column	row

fs-radio Properties

Property	Description	Type	Possible Values	Default
checked	Whether selected	boolean	true/false	false
disabled	Whether disabled	boolean	true/false	false
type	Type	string	circle/capsule/list/card	circle
label	Option text	string	—	—
value	Radio value	any	—	—
maxWidth	Maximum width	string	Supports px, rpx, % and other units	—
maxLines	Maximum lines	number	Positive integer, 0 means no limit	0
extStyle	External style	string	CSS style string	—
tapId	Click identifier	string	—	'radio-id'
allowDeselect	Whether deselection is supported	boolean	true/false	true

tapId note: The fs-radio-group component automatically sets a tapId for each fs-radio, following the naming rule radio-{index} (index starts from 0). Developers can also manually set tapId to override the auto-generated identifier.

allowDeselect note: Controls whether the selected state can be cancelled. When set to false, an already selected radio cannot be deselected by clicking, ensuring that one option is always selected. The default value is true, which supports deselection.

Events

fs-radio-group Events

Event Name	Description	Callback Parameters
change	Triggered when the selected value changes

fs-radio Events

Event Name	Description	Callback Parameters
change	Triggered when the state toggles	{ value: any, checked: boolean }

Note: When fs-radio is contained inside fs-radio-group, only the change event of fs-radio-group will be triggered, and the change event of an individual fs-radio will not be triggered. This avoids duplicate event triggering and unifies selection state changes handling at the group level.

Event Triggering Mechanism Description

Used inside fs-radio-group:

<fs-radio-group bind:change="onGroupChange">
  <fs-radio value="option1">Option 1</fs-radio>  <!-- Will not trigger its own change event -->
  <fs-radio value="option2">Option 2</fs-radio>  <!-- Will not trigger its own change event -->
</fs-radio-group>

// Only this event will be triggered
onGroupChange(e) {
  console.log('Selected value:', e.detail.value);
}

Using fs-radio standalone:

<fs-radio value="single" bind:change="onRadioChange">Standalone usage</fs-radio>

// This event will be triggered
onRadioChange(e) {
  console.log('Selected value:', e.detail.value);
  console.log('Selected state:', e.detail.checked);
}

Slot

Name	Description
Default	Radio item content

---

Design Notes

• Details such as color, size, spacing, icon, and disabled state strictly follow the design specification.
• Supports slot for custom label content.
• Recommended to use with fs-radio-group to ensure radio group behavior.
• Supports the maxWidth property; text wraps automatically when exceeding the maximum width, with icon and text top-aligned.
• maxWidth supports multiple units: px, rpx, %, etc., automatically calculating the available width for the label.
• Supports the maxLines property, limiting the number of displayed text lines and showing an ellipsis (...) when exceeded.
• Supports the extStyle property, allowing customization of font size, height, color, spacing, and other styles.

---

Preview

打开预览