Welcome UI - Checkbox

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.

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.