Docplanner Mobile UI

Edit page

CheckboxField

Use <DpCheckboxField /> whenever you need a user to accept/decline something or turn on/off an option.

Properties

color

gray

🎨 Color variant

isChecked

boolean | undefined

DpCheckbox field value

isPartiallyChecked

boolean | undefined

Determines whether the DpCheckbox is half checked ( - ) for Lists

onChange

((value: boolean) => void) | undefined

Change handler, defaults to toggle @isChecked

label

ReactNode

DpCheckbox field label, can be a string or a react node

hasLeadingIcon

boolean | undefined

Determines whether the DpCheckbox appears at the begining or at the end

wrapStyle

StyleProp<ViewStyle>

Adds a wrapper style for the component Row

error

string | undefined

Error message

Basic usage

<MobileScreen isWhite>
  <DpCheckboxField label="Show only specialists who offer booking an appointment online" />
</MobileScreen>

<MobileScreen isWhite>
  <DpCheckboxField label="Show only specialists who offer booking an appointment online" />
</MobileScreen>

Multi Checkbox Selector with Partially selected main Checkbox

This can be used in large lists as multiselector for the intermediate state

() => {
  const CheckboxSelector = () => {
    const [checkBoxes, setCheckBoxes] = useState([
      { checked: true },
      { checked: false },
      { checked: true },
    ])
    const selected = checkBoxes.filter(curr => !!curr.checked)
    const allSelected = selected.length === 3
    const someSelected = !!selected.length && !allSelected
    const toggleAll = () => {
      const prevVal = !allSelected
      setCheckBoxes(
        checkBoxes.map(current => ({ ...current, checked: prevVal })),
      )
    }
    const toggleId = (id = 0) => {
      let newList = [...checkBoxes]
      newList[id].checked = !newList[id].checked
      setCheckBoxes(newList)
    }
    return (
      <MobileScreen isWhite>
        <TouchableOpacity
          onPress={() => toggleAll()}
          style={[C.row, C.itemsCenter, C.p4]}
        >
          <DpCheckbox
            isPartiallyChecked={someSelected}
            hasLeadingIcon
            isChecked={!!selected.length}
          />
          <DpSpacer />
          <Roboto color="blueDark">
            {selected.length} /3 Selected contacts
          </Roboto>
        </TouchableOpacity>
        <View style={[C.p4, C.my2, C.border1, C.borderGray200, C.radius2]}>
          <DpCheckboxField
            label={'Roxane Smith'}
            isChecked={checkBoxes[0].checked}
            onChange={() => toggleId(0)}
          />
          <DpCheckboxField
            label="Marcus Pepper"
            wrapStyle={C.my2}
            isChecked={checkBoxes[1].checked}
            onChange={() => toggleId(1)}
          />
          <DpCheckboxField
            label="Cynthia Jones"
            isChecked={checkBoxes[2].checked}
            onChange={() => toggleId(2)}
          />
        </View>
      </MobileScreen>
    )
  }
  return <CheckboxSelector />
}

() => {
  const CheckboxSelector = () => {
    const [checkBoxes, setCheckBoxes] = useState([
      { checked: true },
      { checked: false },
      { checked: true },
    ])
    const selected = checkBoxes.filter(curr => !!curr.checked)
    const allSelected = selected.length === 3
    const someSelected = !!selected.length && !allSelected
    const toggleAll = () => {
      const prevVal = !allSelected
      setCheckBoxes(
        checkBoxes.map(current => ({ ...current, checked: prevVal })),
      )
    }
    const toggleId = (id = 0) => {
      let newList = [...checkBoxes]
      newList[id].checked = !newList[id].checked
      setCheckBoxes(newList)
    }
    return (
      <MobileScreen isWhite>
        <TouchableOpacity
          onPress={() => toggleAll()}
          style={[C.row, C.itemsCenter, C.p4]}
        >
          <DpCheckbox
            isPartiallyChecked={someSelected}
            hasLeadingIcon
            isChecked={!!selected.length}
          />
          <DpSpacer />
          <Roboto color="blueDark">
            {selected.length} /3 Selected contacts
          </Roboto>
        </TouchableOpacity>
        <View style={[C.p4, C.my2, C.border1, C.borderGray200, C.radius2]}>
          <DpCheckboxField
            label={'Roxane Smith'}
            isChecked={checkBoxes[0].checked}
            onChange={() => toggleId(0)}
          />
          <DpCheckboxField
            label="Marcus Pepper"
            wrapStyle={C.my2}
            isChecked={checkBoxes[1].checked}
            onChange={() => toggleId(1)}
          />
          <DpCheckboxField
            label="Cynthia Jones"
            isChecked={checkBoxes[2].checked}
            onChange={() => toggleId(2)}
          />
        </View>
      </MobileScreen>
    )
  }
  return <CheckboxSelector />
}

Variants

<MobileScreen isWhite>
  <View style={{ flexDirection: 'row' }}>
    <View>
      <DpCheckboxField />
      <DpSpacer />
      <DpCheckboxField disabled />
    </View>
    <View>
      <DpCheckboxField isChecked />
      <DpSpacer />
      <DpCheckboxField isChecked disabled />
    </View>
    <View>
      <DpCheckboxField color="turquoise" />
      <DpSpacer />
      <DpCheckboxField color="turquoise" disabled />
    </View>
    <View>
      <DpCheckboxField color="turquoise" isChecked />
      <DpSpacer />
      <DpCheckboxField color="turquoise" isChecked disabled />
    </View>
    <View>
      <DpCheckboxField color="red" />
      <DpSpacer />
      <DpCheckboxField color="red" disabled />
    </View>
    <View>
      <DpCheckboxField color="red" isChecked />
      <DpSpacer />
      <DpCheckboxField color="red" isChecked disabled />
    </View>
  </View>
</MobileScreen>

<MobileScreen isWhite>
  <View style={{ flexDirection: 'row' }}>
    <View>
      <DpCheckboxField />
      <DpSpacer />
      <DpCheckboxField disabled />
    </View>
    <View>
      <DpCheckboxField isChecked />
      <DpSpacer />
      <DpCheckboxField isChecked disabled />
    </View>
    <View>
      <DpCheckboxField color="turquoise" />
      <DpSpacer />
      <DpCheckboxField color="turquoise" disabled />
    </View>
    <View>
      <DpCheckboxField color="turquoise" isChecked />
      <DpSpacer />
      <DpCheckboxField color="turquoise" isChecked disabled />
    </View>
    <View>
      <DpCheckboxField color="red" />
      <DpSpacer />
      <DpCheckboxField color="red" disabled />
    </View>
    <View>
      <DpCheckboxField color="red" isChecked />
      <DpSpacer />
      <DpCheckboxField color="red" isChecked disabled />
    </View>
  </View>
</MobileScreen>

Leading icon

<MobileScreen isWhite>
  <DpCheckboxField
    label="Show only specialists who offer booking an appointment online"
    hasLeadingIcon
  />
</MobileScreen>

<MobileScreen isWhite>
  <DpCheckboxField
    label="Show only specialists who offer booking an appointment online"
    hasLeadingIcon
  />
</MobileScreen>

Label length

<MobileScreen isWhite>
  <View>
    <DpCheckboxField label="I declare that I am the child legal guardian." />
    <DpSpacer />
    <DpCheckboxField label="Show only specialists who offer booking an appointment online" />
    <DpSpacer />
    <DpCheckboxField label="Show all the specialists who offer booking an appointment online as well as over the telephone" />
  </View>
</MobileScreen>

<MobileScreen isWhite>
  <View>
    <DpCheckboxField label="I declare that I am the child legal guardian." />
    <DpSpacer />
    <DpCheckboxField label="Show only specialists who offer booking an appointment online" />
    <DpSpacer />
    <DpCheckboxField label="Show all the specialists who offer booking an appointment online as well as over the telephone" />
  </View>
</MobileScreen>

States

<MobileScreen isWhite>
  <DpCheckboxField
    isChecked={false}
    label="Read and understood the conditions"
    onChange={() => {}}
  />
  <DpSpacer />
  <DpCheckboxField
    isChecked
    label="Read and understood the conditions"
    onChange={() => {}}
  />
  <DpSpacer />
  <DpCheckboxField
    isChecked={false}
    label="Read and understood the conditions"
    onChange={() => {}}
  />
  <DpSpacer />
  <DpCheckboxField
    error="Need to check it, sorry!"
    isChecked={false}
    label="Read and understood the conditions"
    onChange={() => {}}
  />
  <DpSpacer />
  <DpCheckboxField
    isChecked={false}
    disabled
    label="Read and understood the conditions"
    onChange={() => {}}
  />
  <DpSpacer />
  <DpCheckboxField
    isChecked={true}
    disabled
    label="Read and understood the conditions"
    onChange={() => {}}
  />
</MobileScreen>

<MobileScreen isWhite>
  <DpCheckboxField
    isChecked={false}
    label="Read and understood the conditions"
    onChange={() => {}}
  />
  <DpSpacer />
  <DpCheckboxField
    isChecked
    label="Read and understood the conditions"
    onChange={() => {}}
  />
  <DpSpacer />
  <DpCheckboxField
    isChecked={false}
    label="Read and understood the conditions"
    onChange={() => {}}
  />
  <DpSpacer />
  <DpCheckboxField
    error="Need to check it, sorry!"
    isChecked={false}
    label="Read and understood the conditions"
    onChange={() => {}}
  />
  <DpSpacer />
  <DpCheckboxField
    isChecked={false}
    disabled
    label="Read and understood the conditions"
    onChange={() => {}}
  />
  <DpSpacer />
  <DpCheckboxField
    isChecked={true}
    disabled
    label="Read and understood the conditions"
    onChange={() => {}}
  />
</MobileScreen>

Complex label

<MobileScreen isWhite>
  <DpCheckboxField
    label={
      <Roboto>
        Terms and conditons.{' '}
        <Roboto color="blueDark" onPress={() => console.log('Link pressed')}>
          Read more
        </Roboto>
      </Roboto>
    }
    onChange={() => {}}
    hasLeadingIcon
  />
</MobileScreen>

<MobileScreen isWhite>
  <DpCheckboxField
    label={
      <Roboto>
        Terms and conditons.{' '}
        <Roboto color="blueDark" onPress={() => console.log('Link pressed')}>
          Read more
        </Roboto>
      </Roboto>
    }
    onChange={() => {}}
    hasLeadingIcon
  />
</MobileScreen>

DpCheckbox only

For convenience reason, we also export a simple stateless <DpCheckbox /> component in case you need to build something custom.

color

primary

🎨 Color variant when the checkbox is checked

isChecked

boolean | undefined

Determines whether the DpCheckbox is checked

isPartiallyChecked

boolean | undefined

Determines whether the DpCheckbox is half checked ( - ) for Lists

disabled

boolean | undefined

Disabled

hasError

boolean | undefined

Determines whether the border is red







<View>
  <DpCheckbox />
  <DpSpacer />
  <DpCheckbox isChecked />
  <DpSpacer />
  <DpCheckbox isChecked isPartiallyChecked />
  <DpSpacer />
  <DpCheckbox hasError />
  <DpSpacer />
  <DpCheckbox disabled />
  <DpSpacer />
  <DpCheckbox disabled isChecked />
</View>

<View>
  <DpCheckbox />
  <DpSpacer />
  <DpCheckbox isChecked />
  <DpSpacer />
  <DpCheckbox isChecked isPartiallyChecked />
  <DpSpacer />
  <DpCheckbox hasError />
  <DpSpacer />
  <DpCheckbox disabled />
  <DpSpacer />
  <DpCheckbox disabled isChecked />
</View>

Docplanner Mobile UI

CheckboxField

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Properties

Properties