RUI.next

Data-Entry
CheckList

CheckList

CheckList is implemented based on List, which is a list that could be checked, also supports two kinds of modes (default and card).

<CheckList defaultValue={["A"]}>
  <CheckList.Item value="A">Item A</CheckList.Item>
  <CheckList.Item value="B">Item B</CheckList.Item>
</CheckList>
<CheckList defaultValue={["A"]}>
  <CheckList.Item value="A">Item A</CheckList.Item>
  <CheckList.Item value="B">Item B</CheckList.Item>
</CheckList>

Example

Basic usage of CheckList component.

Card mode (the 2nd item is checked by default)

API

CheckList

PropertiesDescriptionTypeDefault
valueThe selected itemsstring[][]
defaultValueThe default itemsstring[][]
onChangeTriggered when the option changes(value: string[]) => void-
multipleWhether to allow multiple selection or notbooleanfalse
activeIconThe icon displayed when selectedReactNode<Icon type="check" />
readOnlyIs the check list item readonlybooleanfalse
disabledIs the check list disabledbooleanfalse

CheckList.Item

PropertiesDescriptionTypeDefault
valueThe option valuestring-
readOnlyIs the check list item readonlybooleanfalse
disabledIs the check list item disabledbooleanfalse