Checkbox

Use to allow users to select multiple items from a list of individual items.

Install
npm install @pluralsight/ps-design-system-checkbox
Import
import Checkbox from '@pluralsight/ps-design-system-checkbox'

Examples

Checked

Passing the checked indicates that the checkbox is selected.

import React from 'react'
import Checkbox from '@pluralsight/ps-design-system-checkbox'

const Comp = () => (
  <div className="example-flex-column">
    <Checkbox checked label="I'm checked" value="Checked-eg" />
    <Checkbox label="I'm not" value="Checked-eg" />
  </div>
)

export default Comp

Indeterminate

Passing the indeterminate flag indicates that the checkbox selection should be obscured as if the control was in a third, indeterminate, state.

import React from 'react'
import Checkbox from '@pluralsight/ps-design-system-checkbox'

const Comp = () => (
  <div className="example-flex-column">
    <Checkbox
      indeterminate
      label="I'm indeterminate"
      value="Indeterminate-eg"
    />
    <Checkbox
      checked
      indeterminate
      label="I'm checked but still indeterminate"
      value="Indeterminate-eg"
    />
  </div>
)

export default Comp

Disabled

Disabled checkboxes are unmodifiable and diminished visually.

import React from 'react'
import Checkbox from '@pluralsight/ps-design-system-checkbox'

const Comp = () => (
  <div className="example-flex-column">
    <Checkbox disabled label="Can't touch this" value="Disabled-eg" />
    <Checkbox disabled checked label="Checked or not" value="Disabled-eg" />
  </div>
)

export default Comp

Error

Error states are engaged with the error flag.

import React from 'react'
import Checkbox from '@pluralsight/ps-design-system-checkbox'

const Comp = () => (
  <div className="example-flex-column">
    <Checkbox error label="I've got problems" value="Error-eg" />
    <Checkbox
      error
      checked
      label="Checked and still not good enough"
      value="Error-eg"
    />
  </div>
)

export default Comp

In-app

import React, { useState } from 'react'
import Checkbox from '@pluralsight/ps-design-system-checkbox'

function InAppExample() {
  const [values, setValues] = useState([])

  function checked(name) {
    return values.includes(name)
  }

  function handleCheck(evt, checked, value, name) {
    setValues(prev => {
      if (checked) {
        return [...prev, name]
      }
      return prev.filter(checkedItem => checkedItem !== name)
    })
  }

  return (
    <div className="example-grid--col-2">
      <div>
        <Checkbox
          onChange={handleCheck}
          name="demo"
          value="yes"
          label="Has demo?"
          checked={checked('demo')}
        />
        <Checkbox
          onChange={handleCheck}
          name="assessment"
          value="of-course"
          label="Has assessment?"
          checked={checked('assessment')}
        />
        <Checkbox
          onChange={handleCheck}
          name="slides"
          value="who-doesnt"
          label="Has slides?"
          checked={checked('slides')}
        />
      </div>
      <div>
        Checked:{' '}
        {values.map(checked => (
          <p key={checked}>{checked}</p>
        ))}
      </div>
    </div>
  )
}

export default InAppExample

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Checkbox

Props

Name	Type	Description	Default
`checked`	`boolean`	marks as selected	`false`
`disabled`	`boolean`	standard input disable flag	`false`
`error`	`boolean`	error state flag	`false`
`indeterminate`	`boolean`	marks as indeterminate	`false`
`name`	`string`	form data identifier
`label`	`React.ReactNode`	display name
`onCheck`	`(Event, checked: boolean, value: any, name: string) => void`	(optional) triggers on check toggle
`onChange`	`(Event, checked: boolean, value: any, name: string) => void`	(required) triggers on check toggle
`value`	`string \| number`	form value when checked