> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/03.-publishing-guide/2.-checkbox.md).

# 2. Checkbox

This document is a guide to applying an icon to a checkbox using a local icon.

{% stepper %}
{% step %}

### 1) Prepare the Local Icon

Save the icon to use for the checkbox in the `src/assets/icons/` folder. (The folder name is up to you.)

<div align="left"><figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2F6fTvVN4QE5xVV80tT9M0%2Fimg.png?alt=media&#x26;token=2c9a044e-7ac6-48aa-8954-89a7fb85aed8" alt="" width="252"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### 2) Configure tailwind.config.js

Add the backgroundImage as follows in `tailwind.config.js`. (Adjust the path and file names to match your project.)

{% code title="tailwind.config.js" %}

```
```

{% endcode %}

```js
theme: {
  extend: {
    backgroundImage: {
      'icon-checkbox': "url('~/src/assets/icons/ico_checkbox.svg')",
      'icon-checkbox-on': "url('~/src/assets/icons/ico_checkbox_on.svg')",
      'icon-checkbox-dis': "url('~/src/assets/icons/ico_checkbox_dis.svg')",
    },
  }
}
```

Now you can use the icon image as a custom utility class (background-image).
{% endstep %}

{% step %}

### 3) Separate the CSS File and Import It

You could add this directly to `src/app/globals.css`, but for refactoring purposes, create a `src/assets/css/checkbox.css` file and import it in `globals.css`:

<div align="left"><figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2FMpTuolGVpVymnzuNrWkF%2Fimg%20(2).png?alt=media&#x26;token=50ad9109-2a19-4004-8bc7-372355fffe8a" alt="" width="278"><figcaption></figcaption></figure></div>

```
@import url('../assets/css/checkbox.css');
```

```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  input {
    @apply appearance-none;
  }
}

@layer components {
  .checkbox {
    @apply mx-2 inline-block h-6 w-6 shrink-0 cursor-pointer bg-icon-checkbox bg-contain bg-center bg-no-repeat align-middle checked:bg-icon-checkbox-on disabled:bg-icon-checkbox-dis;
  }
}
```

Explanation:

* The default Tailwind reset does not fully reset the input tag, so we reset it again with `@apply appearance-none;`.
* The `.checkbox` class uses the background-image utility configured earlier.

### 5) Example Usage in a Component

React (or Next.js) component example:

```jsx
const CheckBox = () => {
  return (
    <div className="inline-flex gap-4 rounded-lg border border-gray-400 bg-white p-8">
      <div>
        <input className="checkbox" id="chk1" type="checkbox" />
        <label htmlFor="chk1">label</label>
      </div>
      <div>
        <input className="checkbox" id="chk2" type="checkbox" disabled={true} />
        <label htmlFor="chk2">disabled</label>
      </div>
    </div>
  );
};

export default CheckBox;
```

{% endstep %}

{% step %}

### 6) Result

#### local icons <a href="#local-icons.1" id="local-icons.1"></a>

Save the icon to use for the checkbox in the src/assets/icons/ folder. (The folder name is up to you.)

<img src="https://blog.kakaocdn.net/dn/NaapR/btsBY2VsgPa/hHX3xKeEVcsTkbzlPKcOfK/img.png" alt="" width="375">

#### config <a href="#config.1" id="config.1"></a>

Add the following code to tailwind.config.js.

```
 theme: {
    extend: {
      backgroundImage: {
        'icon-checkbox': "url('~/src/assets/icons/ico_checkbox.svg')",
        'icon-checkbox-on': "url('~/src/assets/icons/ico_checkbox_on.svg')",
        'icon-checkbox-dis': "url('~/src/assets/icons/ico_checkbox_dis.svg')",
      },
```

Now you can use the icon image as a custom utility class.

#### css <a href="#css.1" id="css.1"></a>

You could add the code directly to src/app/globals.css,

but for refactoring purposes, create the src/assets/css/checkbox.css file,

<div align="left"><img src="https://blog.kakaocdn.net/dn/cpPumY/btsB1JHEwvM/MU0aneh0dLFj6i2BjWpWqk/img.png" alt="" width="375"></div>

and import it in src/app/globals.css.

`@import url('../assets/css/checkbox.css');`

Now back in checkbox.css, write the utility class defined above as follows.

And since Tailwind's default reset CSS doesn't fully reset the input tag, we reset it again here.

```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  input {
    @apply appearance-none;
  }
}

@layer components {
  .checkbox {
    @apply mx-2 inline-block h-6 w-6 shrink-0 cursor-pointer bg-icon-checkbox bg-contain bg-center bg-no-repeat align-middle checked:bg-icon-checkbox-on disabled:bg-icon-checkbox-dis;
  }
}
```

#### Example usage inside a component <a href="#component-.1" id="component-.1"></a>

```
const CheckBox = () => {
  return (
    <div className="inline-flex gap-4 rounded-lg border border-gray-400 bg-white p-8">
      <div>
        <input className="checkbox" id="chk1" type="checkbox" />
        <label htmlFor="chk1">label</label>
      </div>
      <div>
        <input className="checkbox" id="chk2" type="checkbox" disabled={true} />
        <label htmlFor="chk2">disabled</label>
      </div>
    </div>
  );
};

export default CheckBox;
```

#### Result <a href="#id-1" id="id-1"></a>

<img src="https://tech.x2bee.com/download/attachments/196706477/image-20231217-193338.png?version=1&#x26;modificationDate=1702841622953&#x26;cacheVersion=1&#x26;api=v2" alt="" width="375">
{% endstep %}
{% endstepper %}