Introduction

fs-form-radio is a form item radio control, used to select one option from a group. It is built on top of ava-ui/fxui/fs-radio-group and ava-ui/fxui/fs-radio, uses the capsule style and arranges options horizontally. It can be used independently or together with fs-form.

Usage

When importing locally, configure in the page's index.json:

"usingComponents": {
  "fs-form-radio": "/avaui-sub/fs-form/fs-form-radio/index"
}

When using together with fs-form:

"usingComponents": {
  "fs-form": "/avaui-sub/fs-form/index",
  "fs-form-item": "/avaui-sub/fs-form/fs-form-item/index",
  "fs-form-radio": "/avaui-sub/fs-form/fs-form-radio/index"
}

PWC (custom component/plugin) usage: only the usingComponents registration uses the avaComponent:// protocol; everything else is the same.

When using standalone:

"usingComponents": {
  "fs-form-radio": "avaComponent://avaui-sub/fs-form/fs-form-radio/index"
}

Code demos

1. Basic usage

Bind the currently selected value via value, and configure the options list via options.

2. Disabled state

Disable the entire radio group via the disabled property, or disable a single option individually within options.

3. Dropdown mode

Enable dropdown mode via mode="dropdown". The component will be displayed in a style similar to fs-form-date, popping up a picker when tapped.

4. Using with fs-form

fs-form-radio can be used as the content control of fs-form-item, supporting form validation and data collection.

---

API

fs-form-radio properties

Parameter	Description	Type	Possible values	Default
value	Currently selected value	any	—	null
options	Options list	Array	—	[]
disabled	Whether disabled	Boolean	—	false
mode	Display mode	String	inline/dropdown	inline
placeholder	Placeholder hint text for dropdown mode	String	—	''
pickerTitle	Dropdown picker title	String	—	''
bordered	Whether to show the border, only effective in dropdown mode	Boolean	—	false
showSearch	Whether to show the search box (dropdown mode)	Boolean	—	false
radioType	Option style type; only card is effective in dropdown mode	String	capsule/card	capsule
direction	Option arrangement direction in inline mode	String	row/column	row

options array item

Field	Description	Type
label	Option display text	String
value	Option value	any
disabled	Whether this option is disabled	Boolean

fs-form-radio events

Event	Description	Callback params
change	When the selected value changes

Note: The change event has bubbles: true and composed: true enabled, so it can be captured by fs-form-item for form validation.

---

Design notes

Inline mode (inline)

• Uses the capsule style arranged horizontally. Switch to the card style via radioType="card"
• Control the arrangement direction via the direction property: row (horizontal) / column (vertical)
• Supports disabling a single option and disabling the entire group
• Automatically syncs the selected state, keeping the UI consistent with the data

Dropdown mode (dropdown)

• Styled like fs-form-date, displaying the name of the selected option
• Implemented based on fs-radio-picker-m for popup selection
• Supports the bordered border style, suitable for scenarios that need a 32px-height input visual
• Supports search, radioType="card" card style, and more
• Suitable for scenarios with many options or where page space needs to be saved

---

打开预览