checkbox

import { Checkbox } from "woly";

Checkboxes allow you to setup selectable options for your users - either to toggle a single setting on or off, or to allow for multiple choices.

Use descriptive static text relevant to each checkbox element.

In case of using set of checkboxes as a logical group use component 'Label' for labeling the checkbox group.

Checkboxes are tiny in nature, and, thus, they can be hard to click or tap.

To enlarge the target area, let users select an option by clicking or tapping not just that small square, but also the label or associated words.

Use a checkbox when the user has to stop before performing an action. Checkbox will introduce a little bit of friction and make them stop and think about the action.

Example

import {Checkbox} from 'ui';

export function Example () {
  const [values, setValues] = React.useState({})

  const handleChange = (e) => {
    const { id } = e.target;

    setValues({
      ...values,
      [id]: !values[id]
    })
  }

  return <Playground direction="vertical">
    <div style={{ width: '240px' }}>
      <Checkbox checked={values['ex1-simple1'] ?? false} id="ex1-simple1" onChange={handleChange} text="Option 1" priority="primary" />
      <Checkbox checked={values['ex1-simple2'] ?? false} id="ex1-simple2" onChange={handleChange} text="Option 2" priority="primary" />
      <Checkbox checked={values['ex1-simple3'] ?? false} id="ex1-simple3" onChange={handleChange} text="Option 3 with long text that will go to next line for sure" priority="primary" />
    </div>
  </Playground>
}

Size

Size controlled by the component-level block property not from the props.

import {Checkbox} from 'ui';

const filler = 'lorem ipsum dolor sit amet'

export function Example () {
  const [values, setValues] = React.useState({})

  const handleChange = (e) => {
    const { checked, id } = e.currentTarget;

    setValues({
      ...values,
      [id]: !values[id]
    })
  }

  return <Playground direction="vertical">
    <block.S>
      <Checkbox checked={values['ex2-small'] ?? false} id="ex2-small" onChange={handleChange} text={`Small ${filler}`} priority="primary" />
    </block.S>
    <block.M>
      <Checkbox
        checked={values['e2-medium'] ?? false}
        id="e2-medium"
        onChange={handleChange}
        text={`Medium ${filler}`}
        priority="primary"
      />
    </block.M>
    <block.L>
      <Checkbox checked={values['ex2-large'] ?? false} id="ex2-large" onChange={handleChange} text={`Large ${filler}`} priority="primary" />
    </block.L>
    <block.XL>
      <Checkbox
        checked={values['e2-extra'] ?? false}
        id="e2-extra"
        onChange={handleChange}
        text={`Extra Large ${filler}`}
        priority="primary"
      />
    </block.XL>
    <block.H>
      <Checkbox checked={values['ex2-huge'] ?? false} id="ex2-huge" onChange={handleChange} text={`Huge ${filler}`} priority="primary" />
    </block.H>
  </Playground>
}

Priorities

Primary priority should be used to focus user attention. The disabled checkbox is unusable and un-clickable.

import {Checkbox} from 'ui';

export function Example () {
  const [values, setValues] = React.useState({})

  const handleChange = (e) => {
    const { checked, id } = e.currentTarget;

    setValues({
      ...values,
      [id]: !values[id]
    })
  }

  return <Playground>
    <Checkbox checked onChange={handleChange} id="primary" text="Primary" priority="primary" />
    <Checkbox
      checked
      onChange={handleChange}
      disabled
      id="disabled"
      text="Disabled"
      priority="primary"
    />
  </Playground>
}

Props

NameTypeDefaultDescription
checkedbooleanWhether checkbox is checked or not
disabledbooleanHTML disabled attribute
idstringHTML id attribute
onChangeReact.ChangeEventHandler<HTMLInputElement>Callback when checkbox is clicked
onKeyDownThe onKeydown event occurs when the user is pressing a key (on the keyboard)
prioritystring'secondary'Priority prop to style Checkbox component
textstringText component