Checkbox

Usage

primary

function CheckboxUsage() {
  const [isOn, setIsOn] = useState(false)

  return (
    <View>
      <Checkbox label="primary" value={isOn} onValueChange={setIsOn} />
    </View>
  )
}

Status

primary

accent

success

info

warning

error

function CheckboxStatuses() {
  return (
    <View>
      <Checkbox
        status="primary"
        label="primary"
        containerStyle={styles.itemContainer}
      />
      <Checkbox
        status="accent"
        label="accent"
        containerStyle={styles.itemContainer}
      />
      <Checkbox
        status="success"
        label="success"
        containerStyle={styles.itemContainer}
      />
      <Checkbox
        status="info"
        label="info"
        containerStyle={styles.itemContainer}
      />
      <Checkbox
        status="warning"
        label="warning"
        containerStyle={styles.itemContainer}
      />
      <Checkbox
        status="error"
        label="error"
        containerStyle={styles.itemContainer}
      />
    </View>
  )
}

Size

small

medium

large

function CheckboxSizes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Checkbox label="small" size="small" />
      <Checkbox label="medium" size="medium" />
      <Checkbox label="large" size="large" />
    </View>
  )
}

Intermediate

Indeterminate

Indeterminate

function CheckboxIndeterminate() {
  const [isOn, setIsOn] = useState(true)
  const [indeterminate, setIndeterminate] = useState(true)

  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Checkbox
        label="Indeterminate"
        value={isOn}
        onValueChange={(value) => {
          setIsOn(value)
          setIndeterminate(false)
        }}
        containerStyle={styles.itemContainer}
        indeterminate={indeterminate}
      />
      <Checkbox
        label="Indeterminate"
        value={isOn}
        onValueChange={setIsOn}
        containerStyle={styles.itemContainer}
        indeterminate
        disabled
      />
    </View>
  )
}

Disabled

Disabled

Disabled

Disabled

function CheckboxDisabled() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Checkbox label="Disabled" disabled />
      <Checkbox label="Disabled" value status="primary" disabled />
      <Checkbox label="Disabled" size="large" disabled />
    </View>
  )
}

Custom

Agree to T&C

Click here to see Privacy Policy

Props

Prop	Data Type	Default Value	Description
Extends	BaseBooleanFieldProps	--	Inherits properties from BaseBooleanFieldProps
value	boolean	--	Control the state of the checkbox with value
indeterminate	boolean	--	Set to true for an intermediate state
onValueChange	(value: boolean) => void | Promise<void>	--	Callback for on value change
style	StyleProp<ViewStyle>	--	Style of the checkbox
position	"left" | "right"	right	Control the position of the field
adjacent	boolean	true	Set it to false to position them apart i.e. space-between
disabled	boolean	--	Set to true for disabled field
color	string	--	Set custom color
label	string	--	Label text above the input
caption	string	--	Caption text below the text input
error	string	--	Error text in error `status` below caption text
containerStyle	StyleProp<ViewStyle>	--	Container view style
labelStyle	StyleProp<TextStyle>	--	Label text style
captionStyle	StyleProp<TextStyle>	--	Caption text style
errorStyle	StyleProp<TextStyle>	--	Error text style
status	BlossomStatus	primary	--
size	BlossomSize	medium	--
children	ReactNode	--	Children