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 { Checkbox } from 'welcome-ui/Checkbox'

const Example = () => {
  return (
    <>
      <Checkbox
        name="default"
        onChange={value => alert(`Checkbox is now ${value ? 'checked' : 'unchecked'}`)}
      />
      <Checkbox checked name="not-checked" />
      <Checkbox indeterminate name="indeterminate" />
      <Checkbox disabled name="default-disabled" />
      <Checkbox checked disabled name="not-checked-disabled" />
    </>
  )
}

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