> For the complete documentation index, see [llms.txt](https://wigxel.gitbook.io/react-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wigxel.gitbook.io/react-components/components/checkbox.md).

# Checkbox

Checkbox for forms

Checkbox components like [Radio components](https://app.gitbook.com/@wigxel/s/react-components/~/drafts/-MOCKdxkI8tSnr597cRJ/components/radio) also have two variations which the `Checkout` and `Checkbox1`. They can be import into a file as shown below.

```jsx
// 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](https://app.gitbook.com/@wigxel/s/react-components/~/drafts/-MOCKdxkI8tSnr597cRJ/components/radio).

```jsx
// 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](https://app.gitbook.com/@wigxel/s/react-components/~/drafts/-MOCKdxkI8tSnr597cRJ/components/radio) can also be used to wrap the Checkbox component to make it have same outer look like the [Radio component.](https://app.gitbook.com/@wigxel/s/react-components/~/drafts/-MOCKdxkI8tSnr597cRJ/components/radio)

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

The Checkbox component can be used with the[ React-hook-form](https://react-hook-form.com/) and can be hooked to [React-hook-form](https://react-hook-form.com/) using the ref props.

```jsx
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>
  )
}; 
```

&#x20;

{% hint style="info" %}
Default Theme configuration for Checkbox component
{% endhint %}

```jsx
{
  ...DefaultTheme,
  ...
};
```