# @tailus/themer-checkbox

> Checkbox themes

Latest version **0.0.1** (published 2023-10-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tailus/themer-checkbox
pnpm add @tailus/themer-checkbox
yarn add @tailus/themer-checkbox
bun add @tailus/themer-checkbox
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-10-08 |
| First published | 2023-10-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tailus.io |
| Maintainers | meschacirung |

## Links

- npm: https://www.npmjs.com/package/@tailus/themer-checkbox
- npm.io page: https://npm.io/package/@tailus/themer-checkbox

## Dependencies (3)

- [@types/node](https://npm.io/package/@types/node.md) ^20.5.9
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^3.3.3
- [@tailus/themer](https://npm.io/package/@tailus/themer.md) ^0.0.1

## Recent versions

- 0.0.1 (latest) — 2023-10-08

## README

# Checkbox Component Theme

## Overview

The checkbox component theme is a collection of Tailwind CSS utilities that can be used to create checkboxes with different variants. Checkboxes are used to allow users to select one or more options from a list.

## Installation

To install the checkbox component theme, run the following command:

```bash
npm install @tailus/themer-checkbox
```

## Importation

To import the checkbox component theme, you can use the following import:

```tsx
import { checkbox, ringVariant } from "@tailus/themer-checkbox";
```

## Variants

The checkbox component theme provides two variants:

-   `checkbox` (default): The default variant.
-   `ringVariant`: A variant with a ring around the indicator.

## Props

The checkbox component theme object contains the following properties:

-   `root`: The Tailwind CSS utilities for the root element of the checkbox component.
-   `indicator`: The Tailwind CSS utilities for the indicator element of the checkbox component.
-   `label`: The Tailwind CSS utilities for the label element of the checkbox component.

## Usage

To use the checkbox component theme, simply import the appropriate variant and add its props to the checkbox element and its child elements. For example, to create a default checkbox component, you would import the `checkbox` variant and add its props to the checkbox element.

### Example (Radix UI)

```tsx
import * as Checkbox from "@radix-ui/react-checkbox";
import { checkbox as theme } from "@tailus/themer-checkbox";

const CheckboxUI = () => (
    <form>
        <Checkbox.Root className={theme.root}>
            <Checkbox.Indicator className={theme.indicator}>// your icon here</Checkbox.Indicator>
            <Checkbox.Label className={theme.label}>Checkbox label</Checkbox.Label>
        </Checkbox.Root>
    </form>
);

export default CheckboxUI;
```

## RingVariant

To create a ring variant checkbox, you would import the `ringVariant` variant and add its props to the checkbox element.

```tsx
import * as Checkbox from "@radix-ui/react-checkbox";
import { ringVariant as theme } from "@tailus/themer-checkbox";

const CheckboxUI = () => (
    <form>
        <Checkbox.Root className={theme.root}>
            <Checkbox.Indicator className={theme.indicator}>// your icon here</Checkbox.Indicator>
            <Checkbox.Label className={theme.label}>Checkbox label</Checkbox.Label>
        </Checkbox.Root>
    </form>
);

export default CheckboxUI;
```

**Note:** The checkbox is only available for the primary color and There is no customization available for the checkbox component theme at this time.

---
_Source: https://npm.io/package/@tailus/themer-checkbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._