Checkbox

Checkbox is used for a list of selections that are meant to have one or more options checked.

Summary

See this kit in action in our sample UI

Default

import React from 'react'

import Checkbox from 'playbook-ui'

const CheckboxDefault = (props) => {
  return (
    <div>
      <Checkbox
          name="default name"
          tabIndex={0}
          text="Checkbox label"
          value="default value"
      />
    </div>
  )
}

export default CheckboxDefault

Load as checked

import React from 'react'

import Checkbox from 'playbook-ui'

const CheckboxChecked = (props) => {
  return (
    <div>
      <Checkbox
          checked
          name="checkbox-name"
          text="Checked Checkbox"
          value="check-box value"
      />
    </div>
  )
}

export default CheckboxChecked

React Hook Form

You can pass react hook props to the checkbox kit.

import React, { useState } from "react"
import { useForm } from "react-hook-form"
import { Button, Checkbox, Flex, Body } from "playbook-ui"

const CheckboxReactHook = () => {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      Small: false,
      Medium: false,
      Large: false,
    },
  })

  const [submittedData, setSubmittedData] = useState({
    Small: false,
    Medium: false,
    Large: false,
  })

  const onSubmit = (data) => {
    setSubmittedData(data)
  }

  return (
    <Flex orientation="row">
      <Flex align="start"
          orientation="column"
          paddingRight="lg"
      >
        <form onSubmit={handleSubmit(onSubmit)}>
          <Checkbox padding="xs"
              text="Small"
              {...register("Small")}
          />
          <br />
          <Checkbox padding="xs"
              text="Medium"
              {...register("Medium")}
          />
          <br />
          <Checkbox padding="xs"
              text="Large"
              {...register("Large")}
          />
          <br />
          <Button htmlType="submit"
              marginTop="sm"
              text="submit"
          />
        </form>
      </Flex>
      <Flex align="start"
          orientation="column"
      >
        <Body padding="xs"
            text={`Small: ${submittedData.Small ? "true" : "false"}`}
        />
        <Body padding="xs"
            text={`Medium: ${submittedData.Medium ? "true" : "false"}`}
        />
        <Body padding="xs"
            text={`Large: ${submittedData.Large ? "true" : "false"}`}
        />
      </Flex>
    </Flex>
  )
}

export default CheckboxReactHook

Custom Checkbox

import React, { useState } from 'react'

import Checkbox from 'playbook-ui'

const CheckboxCustom = (props) => {
  const [checked, setChecked] = useState(false)

  const handleOnChange = () => {
    setChecked(!checked)
  }

  return (
    <div>
      {`The checkbox is ${checked ? 'checked' : 'unchecked'}.`}
      <br />
      <br />
      <div>
        <Checkbox
            text="Toggle Me"
        >
          <input
              checked={checked}
              name="custom-name"
              onChange={handleOnChange}
              type="checkbox"
              value="custom-value"
          />
        </Checkbox>
      </div>
    </div>
  )
}

export default CheckboxCustom

Default w/ Error

import React from 'react'
import { Checkbox } from 'playbook-ui'

const CheckboxError = (props) => {
  return (
    <div>
      <Checkbox
          error
          name="default name"
          text="Checkbox label"
          value="default value"
      />
    </div>
  )
}

export default CheckboxError

Indeterminate Checkbox

import React, { useState } from 'react'
import { Checkbox, Table } from 'playbook-ui'

const CheckboxIndeterminate = (props) => {
  const [checkboxes, setCheckboxes] = useState([
    { name: 'Coffee', checked: false },
    { name: 'Ice Cream', checked: false },
    { name: 'Chocolate', checked: true },
  ])

  const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked)
  const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked)

  const processCheckboxes = (checked) =>
    checkboxes.slice(0).map((checkbox) => {
      checkbox.checked = checked
      return checkbox
    })

  const onToggleAll = () => {
    setCheckboxes(
      isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
    )
  }

  const updateCheckboxes = (checkbox, index) => {
    const newCheckboxes = checkboxes.slice(0)
    newCheckboxes[index].checked = !checkbox.checked
    setCheckboxes(newCheckboxes)
  }

  return (
    <Table
        container={false}
        size="md"
    >
      <thead>
        <tr>
          <th>
            <Checkbox
                checked={isAllChecked}
                indeterminate={!isAllChecked && !isNoneChecked}
                name="checkbox-name"
                onChange={onToggleAll}
                text={isNoneChecked ? 'Check All' : 'Uncheck All'}
                value="check-box value"
            />
          </th>
        </tr>
      </thead>
      <tbody>
        {checkboxes.map((checkbox, index) => (
          <tr key={index}>
            <td>
              <Checkbox
                  checked={checkbox.checked}
                  name={checkbox.name}
                  onChange={() => {
                    updateCheckboxes(checkbox, index)
                  }}
                  text={checkbox.name}
                  value="check-box value"
              />
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  )
}

export default CheckboxIndeterminate

Disabled Checkbox

import React from 'react'

import Checkbox from 'playbook-ui'

const CheckboxDisabled = (props) => {
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <Checkbox
          disabled
          marginBottom="xs"
          name="default name"
          tabIndex={0}
          text="Disabled unchecked"
          value="default value"
      />
      <Checkbox
          checked
          disabled
          name="checkbox-name"
          text="Disabled checked"
          value="check-box value"
      />
    </div>
  )
}

export default CheckboxDisabled

UI Samples using Checkbox Kit

Get the full picture. See how this kit is used in our samples.

Conference Statistics

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat