Welcome UI - Customizable design system with react

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

Installation

Run the following command:

yarn add @welcome-ui/checkbox

Import component:

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

Examples

With Label

Use Field component to add a label

With hint

Use Field component to add a hint

Variants

Use hint, warning, error, info or success properties on Field component to add a variant status on your checkbox. The label, hint or border color are set by magic 🪄

Nested checkboxes

Use 'indeterminate' prop to manage the behaviour of a parent checkbox in response to children checkboxes. This can help you create a nested selection menu.

React Hook Form

A FieldGroup form with React Hook Form

function() {
  const FormChildren = ({ control, register }) => (
    <FieldGroup label="Check the frameworks you have already worked with">
      <Controller
        name="react"
        control={control}
        render={({ field: { onChange, value, ...field } }) => (
          <Field label="React">
            <Checkbox
              {...field}
              checked={value}
              onClick={onChange}
            />
          </Field>
        )}
      />
      <Controller
        name="angular"
        control={control}
        render={({ field: { onChange, value, ...field } }) => (
          <Field label="Angular">
            <Checkbox
              {...field}
              checked={value}
              onClick={onChange}
            />
          </Field>
        )}
      />
      <Controller
        name="vue"
        control={control}
        render={({ field: { onChange, value, ...field } }) => (
          <Field label="Vue">
            <Checkbox
              {...field}
              onClick={onChange}
              checked={value}
            />
          </Field>
        )}
      />
    </FieldGroup>
  )

  return (
    <HookForm
      defaultValues={{ react: true, angular: false, vue: false  }}
      schemaValidate={() => yup.object().shape({
          react: yup.boolean().required().oneOf([true, false]),
          angular: yup.boolean().required().oneOf([true, false]),
          vue: yup.boolean().required().oneOf([true, false]),
        })
      }
    >
      <FormChildren />
    </HookForm>
  )
}