Checkbox

Effect demonstration

1. Default effect

<Checkbox
  options={[
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange" },
  ]}
/>

2. A checkbox is selected by default

<Checkbox
  options={[
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange" },
  ]}
  defaultValue={["Pear"]}
/>

3. Do not display select all

<Checkbox
  options={[
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange" },
  ]}
  showCheckAll={false}
/>

4. Disable a checkbox

<Checkbox
  options={[
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange" },
  ]}
  disabledValue={["Pear"]}
/>

5. Checkbox list

<Checkbox.CheckboxList
  options={[
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange" },
  ]}
/>

API

Checkbox /CheckboxList

Properties	Required	Description	Type	Default Value
options	true	Specify options	RadioOption[]
value	false	selected item	ReactText[]
onChange	false	The callback function triggered by selecting the radio button	(value: ReactText[]) => void
defaultValue	false	Default selected items	ReactText[]
size	false	icon size	number
disabledValue	false	Set disabled items	ReactText[]
containerStyle	false	Custom container style	ViewStyle
itemStyle	false	Customize the style of a single radio button	ViewStyle
labelStyle	false	Custom text style	TextStyle
showCheckAll	false	Whether to display the select box	boolean	true
activeOpacity	false	Opacity when not disabled	number	0.6

CheckboxItem

Properties	Required	Description	Type	Default Value
itemStyle	false	Customize the style of a single radio button	ViewStyle
labelStyle	false	Custom text style	TextStyle
size	false	icon size	number
label	true	radio button text	ReactNode
value	true	The value of the radio button	ReactText
status	true	Radio button checked status	'checked' | 'unchecked' | 'halfchecked'
disabled	true	Radio button disabled state	boolean
mode	false	Radio button mode, list means display in a list	'list' | 'row'
onChange	false	The callback function triggered by selecting the radio button	(value: ReactText, status: RadioStatus) => void