Checkbox

The Checkbox component allows users to select multiple options from a set of choices. It consists of a small box that, when clicked, toggles between checked and unchecked states. Checkboxes are commonly used in forms and lists to enable users to make multiple selections efficiently.

Source Built with Ariakit

Github

import { useState } from 'react'

import { Checkbox } from 'welcome-ui/Checkbox'

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

  const handleChange = (value: boolean) => {
    setChecked(value)
    alert(`Checkbox is now ${value ? 'checked' : 'unchecked'}`)
  }

  return (
    <ul className="flex flex-col gap-md mx-auto">
      <li className="flex gap-sm items-center">
        <Checkbox checked={checked} name="default" onChange={handleChange} />
        <span>Checkbox: controlled state</span>
      </li>
      <li className="flex gap-sm items-center">
        <Checkbox checked={false} name="not-checked" />
        <p>Checkbox: false</p>
      </li>
      <li className="flex gap-sm items-center">
        <Checkbox indeterminate name="indeterminate" />
        <p>Checkbox: indeterminate</p>
      </li>
      <li className="flex gap-sm items-center">
        <Checkbox disabled name="default-disabled" />
        <p>Checkbox: disabled</p>
      </li>
      <li className="flex gap-sm items-center">
        <Checkbox checked disabled name="not-checked-disabled" />
        <p>Checkbox: checked & disabled</p>
      </li>
    </ul>
  )
}

export default Example

Examples

Variants

Use warning, danger or success to add a variant color on your checkbox. The label or hint are set with Label or Field component.

Github

Toast Date picker