Checkbox

Checkbox for forms

Checkbox components like Radio components also have two variations which the Checkout and Checkbox1. They can be import into a file as shown below.

// importing Checkbox components
import { Checkbox, Checkbox1 } from "@wigxel/react-components/lib/form";

The Checkbox and Checkbox1 are different in style but accept the same properties. The name (string) and value (string) properties are required while the ref prop isn't just like the Radio component.

// First variation of the Checkbox component
<Checkbox name="rice" value="rice" />
<span>&nbsp; Rice</span>

// Second variation of the Checkbox component
<Checkbox1 name="rice" value="rice" />
<span>&nbsp; Beans</span>

The Radio Pill in the Radio component can also be used to wrap the Checkbox component to make it have same outer look like the Radio component.

<Radio.Pill>
    <Checkbox name="rice" value="rice" />
    <span>&nbsp; Rice</span>
</Radio.Pill>

The Checkbox component can be used with the React-hook-form and can be hooked to React-hook-form using the ref props.

import { useForm } from "react-hook-form";

export const Form = () => {
  const form = useForm({...});

  return(
    <form onSubmit={form.handleClick(...)}>
        <Radio.Pill>
          <Checkbox ref={form.register} name="rice" value="rice" />
          <span>&nbsp; Rice</span>
        </Radio.Pill>
        <Radio.Pill>
          <Checkbox1 ref={form.register} name="beans" value="beans" />
          <span>&nbsp; Beans</span>
        </Radio.Pill>
      </form>
  )
}; 

Default Theme configuration for Checkbox component

{
  ...DefaultTheme,
  ...
};