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 * as React from 'react'

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

const Example = () => {
  const [checkbox, setCheckbox] = React.useState(false)
  const [checkboxChecked, setCheckboxChecked] = React.useState(true)
  const [checkboxIndeterminate, setCheckboxIndeterminate] = React.useState(false)

  return (
    <>
      <Checkbox checked={checkbox} name="default" onChange={() => setCheckbox(!checkbox)} />
      <Checkbox
        checked={checkboxChecked}
        name="not-checked"
        onChange={() => setCheckboxChecked(!checkboxChecked)}
      />
      <Checkbox
        checked={checkboxIndeterminate}
        indeterminate
        name="indeterminate"
        onChange={() => setCheckboxIndeterminate(!checkboxIndeterminate)}
      />
      <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.