Introduction

The checkbox component is used to make multiple selections among several options. It supports types such as circular checkbox, capsule checkbox, and card checkbox (new style), and is suitable for scenarios such as forms, filtering, and option selection. Combined with fs-checkbox-group, you can implement grouping, horizontal/vertical arrangement, and multi-select control.

Usage

Import locally by configuring it in the index.json of the page or component that needs it:

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

Code Demos

Type (type property)

Status

Arrangement Direction (direction property)

Maximum Width (maxWidth property)

Maximum Lines (maxLines property)

---

API

fs-checkbox-group Properties

Property	Description	Type	Optional Values	Default
value	Currently selected value	array	—	[]
direction	Arrangement direction	string	row/column	row
disabled	Whether to disable	boolean	true/false	false

fs-checkbox Properties

Property	Description	Type	Optional Values	Default
checked	Whether checked	boolean	true/false	false
indeterminate	Whether in indeterminate state	boolean	true/false	false
disabled	Whether to disable	boolean	true/false	false
type	Type	string	circle/capsule/card	circle
label	Option text	string	—	—
value	Checkbox value	any	—	—
maxWidth	Maximum width	string	Supports units such as px, rpx, %	—
maxLines	Maximum number of lines	number	Positive integer, 0 means no limit	0
extStyle	External style	string	CSS style string	—

Events

fs-checkbox-group Events

Event Name	Description	Callback Parameter
change	Triggered when the selected value changes	{ value: Array }

fs-checkbox Events

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

---

Design Notes

• Details such as colors, sizes, spacing, icons, and disabled states strictly follow the design specification.
• Supports slot for custom label content.
• Recommended to be used with fs-checkbox-group to ensure multi-select group behavior.
• Supports indeterminate state, suitable for scenarios such as tree selection.
• Supports the maxWidth property; when the maximum width is exceeded, text wraps automatically with the icon and text top-aligned.
• maxWidth supports multiple units: px, rpx, %, etc., automatically calculating the available width of the label.
• Supports the maxLines property to limit the number of displayed text lines; an ellipsis (...) is shown when exceeded.
• Supports the extStyle property to customize styles such as font size, height, color, and spacing.

---

Preview

打开预览