PHPackages                             malven/craft-bits - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. malven/craft-bits

ActiveCraft-plugin[Templating & Views](/categories/templating)

malven/craft-bits
=================

A collection of simple, reusable components for use in your Craft Twig templates.

1.3.3(5y ago)01.4k[1 PRs](https://github.com/cmalven/craft-bits/pulls)MITHTML

Since Dec 26Pushed 2y agoCompare

[ Source](https://github.com/cmalven/craft-bits)[ Packagist](https://packagist.org/packages/malven/craft-bits)[ RSS](/packages/malven-craft-bits/feed)WikiDiscussions master Synced 2w ago

READMEChangelog (10)Dependencies (1)Versions (12)Used By (0)

Bits plugin for Craft CMS 3.x
=============================

[](#bits-plugin-for-craft-cms-3x)

A collection of simple, reusable components for use in your Craft Twig templates.

Requirements
------------

[](#requirements)

This plugin requires Craft CMS 3.0.0-beta.23 or later.

Installation
------------

[](#installation)

To install the plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

    ```
     cd /path/to/project

    ```
2. Then tell Composer to load the plugin:

    ```
     composer require malven/craft-bits

    ```
3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Bits.

Components
----------

[](#components)

### Forms

[](#forms)

#### Text

[](#text)

```
{{ text({
  mainClass: 'input-text',
  classes: '',
  showLabel: true,
  name: 'email',
  label: 'Email',
  value: '',
  type: 'text',
  placeholder: 'someone@gmail.com',
  autocomplete: false,
  errors: ['Some error message'],
  disabled: false,
  required: false,
  inputAttrs: {
    'minlength': 1,
    'maxlength': 5
  }
}) }}
```

#### Textarea

[](#textarea)

```
{{ textarea({
  mainClass: 'input-textarea',
  classes: '',
  showLabel: true,
  name: 'comment',
  label: 'Comment',
  value: '',
  placeholder: 'The quick brown fox jumped over the lazy dog.',
  autocomplete: false,
  errors: ['Some error message'],
  disabled: false,
  required: false,
  inputAttrs: {
    'rows': 3
  }
}) }}
```

#### Selectable

[](#selectable)

A `selectable` renders either a `checkbox` or `radio` element, depending on the supplied `type`.

```
{{ selectable({
  mainClass: 'input-selectable',
  classes: '',
  name: 'options',
  label: 'Options',
  type: 'checkbox|radio',
  unselectedSvg: '',
  selectedSvg: '',
  items: [
    {
      label: 'Burgers',
      value: 'burgers',
      selected: false
    },
    {
      label: 'Pizza',
      value: 'pizza',
      selected: false
    }
  ],
  required: false
}) }}
```

#### Button

[](#button)

A `btn` allows you to create either an `a` or `button` element that use the same underlying strucuture and can be styled identically.

```
{# A `button` with a type of `button` #}
{{ btn({
  mainClass: 'btn',
  classes: '',
  text: 'Submit',
  type: 'button'
}) }}

{# An `a` that opens in a new window and includes an SVG graphic #}
{% set graphic %}
  {{ source('/example.svg') }}
{% endset %}

{{ btn({
  mainClass: 'btn',
  classes: '',
  text: 'Visit Our Website',
  href: 'https://craftcms.com',
  target: '_blank',
  graphic: graphic
}) }}
```

Utilies
-------

[](#utilies)

### Validate Classes

[](#validate-classes)

When building complex sites using BEM syntax for modifier classes (e.g. `foo--large`) it can be helpful to define which modifiers can be used together and which must be exclusive.

The `validateClasses` utility makes this easy by allowing you to define a simple array of exclusive class groups. Only one class in each group is allowed to be applied, otherwise a console error will be thrown. Console errors only display when `craft.app.config.general.devMode` is enabled for performance reasons.

```
{# In any Twig template… #}

{% include '_partials/foo' with {
  classes: 'foo--alpha foo--beta foo--gamma'
} only %}

{# In templates/_partials/foo.twig #}

{{ validateClasses(classes, [
  [
    'foo--alpha',
    'foo--beta',
  ],
  [
    'foo--gamma',
  ]
])}}

    …

```

In the above example, you'll see the console error `The following CSS classes cannot be combined on this element: "foo--alpha" and "foo--beta"` because those two classes are in the same group.

Customization
-------------

[](#customization)

If you want to use Bits components directly as described in the examples above, that’s just fine. However, you may find it valuable to create your own custom components that provide a thin layer of abstraction over Bits, making them more plug-and-play for your project.

Here’s an example:

`my-project/templates/_macros/forms.twig`

```
{# =============================================================== #}
{# Forms
{# =============================================================== #}
{#
  {% import '_macros/forms' as forms %}
#}

{# ------------------------------------------------------------------ #}
{# Input: Text
{# ------------------------------------------------------------------ #}
{#
  {{ forms.inputText({}) }}

  Renders a common text input.
#}

{%- macro inputText(options = {}) -%}

{% set options = options | merge({
  mainClass: 'my-custom-input'
}) %}

{{ text(options) }}

{%- endmacro -%}
```

`my-project/templates/index.twig`

```
{% import '_macros/forms' as forms %}

{{ forms.inputText({
  name: 'firstName',
  label: 'First Name',
  value: '',
  placeholder: 'someone@gmail.com'
}) }}
```

Now every time you call your custom macro, you can pass it any of the same options you would pass directly to Bits, but you can be sure that it will always have the correct class and default options applied.

Brought to you by [Chris Malven](https://malven.co)

###  Health Score

31

—

LowBetter than 66% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity68

Established project with proven stability

 Bus Factor1

Top contributor holds 91.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~62 days

Recently: every ~119 days

Total

10

Last Release

2180d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/13976264?v=4)[Marcus](/maintainers/malven)[@Malven](https://github.com/Malven)

---

Top Contributors

[![cmalven](https://avatars.githubusercontent.com/u/610118?v=4)](https://github.com/cmalven "cmalven (11 commits)")[![dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?v=4)](https://github.com/dependabot-preview[bot] "dependabot-preview[bot] (1 commits)")

---

Tags

cmsCraftcraftcmscraft-pluginbits

### Embed Badge

![Health badge](/badges/malven-craft-bits/health.svg)

```
[![Health](https://phpackages.com/badges/malven-craft-bits/health.svg)](https://phpackages.com/packages/malven-craft-bits)
```

###  Alternatives

[verbb/formie

The most user-friendly forms plugin for Craft.

102393.6k59](/packages/verbb-formie)[wbrowar/guide

A CMS Guide for Craft CMS.

6154.6k1](/packages/wbrowar-guide)[verbb/hyper

A user-friendly links field for Craft.

24147.8k12](/packages/verbb-hyper)[verbb/footnotes

Adds a footnotes feature to CKEditor fields and Twig templates.

213.5k](/packages/verbb-footnotes)[jalendport/craft-preparse

A fieldtype that parses Twig when an element is saved and saves the result as plain text.

1087.5k](/packages/jalendport-craft-preparse)[verbb/color-mixer

A set of Twig filters for modifying colors.

1321.1k](/packages/verbb-color-mixer)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)