Introduction

fs-radio-picker is a powerful popup-style picker component that supports both single-select and multi-select modes, and provides search and manual input features, making it suitable for various selection scenarios.

Use Cases

• When you need to select one or more items from a large number of options
• When you need search functionality to quickly locate options
• A mobile-friendly selection experience
• Supports both single-select and multi-select modes
• When users need to enter custom option values
• Different radio display style needs (circle/list/card)

Code Demos

Selection Mode (mode property)

Radio Type (radioType property)

---

API

Properties

Property	Description	Type	Optional Values	Default
show	Whether to show the picker	boolean	true/false	false
title	Picker title	string	—	'Picker'
options	Option data	array	—	[]
value	Currently selected value	string/array	—	null
mode	Selection mode	string	single/multiple	single
showSearch	Whether to show the search box	boolean	true/false	true
searchPlaceholder	Search box placeholder	string	—	'Search'
showSelectAll	Whether to show the select-all button (only effective in multi-select mode)	boolean	true/false	false
confirmButton	Confirm button configuration	object	—	null
cancelButton	Cancel button configuration	object	—	null
selectedCountText	Text for the selected count display	string	—	'Selected'
radioType	Radio type	string	circle/list/card	circle
overlay	Overlay configuration	object	—	{}
minHeight	Popup minimum height	string	—	''
allowDeselect	Whether to allow deselection in single-select mode	boolean	true/false	true

Options Property Notes

Property	Description	Type	Required	Default
value	Unique identifier value of the option	string	Yes	—
label	Display text of the option	string	Yes	—
handInput	Whether it is a manual input item	boolean	No	false

Property	Description	Type	Optional Values	Default
text	Button display text	string	—	—
type	Button type	string	primary/normal/danger	primary
style	Custom inline style	string	—	—

Overlay Configuration Notes

Property	Description	Type	Default
zIndex	Overlay z-index	number	12000
backgroundColor	Overlay background color	string	'rgba(0,0,0,0.7)'
duration	Animation duration (ms)	number	300
preventScrollThrough	Whether to prevent scroll-through	boolean	true
closeOnOverlayClick	Whether clicking the overlay closes the popup	boolean	true
customStyle	Custom style	string	''
customClass	Custom style class name	string	''

Events

Event Name	Description	Callback Parameter
confirm	Triggered when the selection is confirmed	{value: selected value, handInputValues: manual input value object, confirmButton: button configuration, selectedIndices: indices of selected items}
cancel	Triggered when the selection is cancelled	cancelButton button configuration object
close	Triggered when the picker is closed	—
overlayClick	Triggered when the overlay is clicked	—

---

Design Notes

Basic Architecture

• Built on the fs-popup component to implement the popup effect, supporting a title and search box
• Uses the fs-radio component to implement the selection functionality, supporting both single-select and multi-select modes
• Supports search functionality to quickly filter options
• Displays the selected count and action buttons at the bottom
• Follows mobile interaction guidelines

Selection Modes

• Single-select mode (single): value is a string; clicking an option directly selects it and closes the picker, with no bottom action bar shown
• Multi-select mode (multiple): value is an array; clicking toggles the selected state, and a bottom action bar is shown for confirmation

Radio Types

• circle type: Traditional circular selection box, suitable for general selection scenarios
• list type: List style with a checkmark shown when selected, suitable for list selection scenarios
• card type: Card style (new style), supports adaptive rendering with theme light colors (selected state uses a light theme background with a theme-color border), and the manual input box fits perfectly inside the card

Select-All Feature

• Only effective in multi-select mode, controlled by the showSelectAll property
• Supports smart state toggling: shows "Select All" when not all are selected, and "Deselect All" when all are selected
• Compatible with search: after searching, select-all only applies to the currently displayed options

Manual Input Feature

• When an option has handInput: true, an input box is displayed for the user to enter a custom value
• Manual input values are passed back via the handInputValues object, in the format {value: input}
• Supports mixed use with normal options, providing a more flexible selection experience

Search Feature

• Integrates the search box feature of fs-popup
• Supports real-time search filtering of options
• The search scope is the label field of the options

Interaction Experience

• In single-select mode, one tap selects, providing a quick selection experience
• In multi-select mode, confirm/cancel actions are provided to avoid misoperation
• Supports show/hide control of the cancel button
• Manual input items support click event bubbling prevention to avoid accidentally triggering selection

---

Preview

打开预览