Checkbox

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

Summary

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 { Button, Checkbox, Flex, Body } from 'playbook-ui'import { useForm } from "react-hook-form"

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

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