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 1y 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 3d 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

32

—

LowBetter than 72% of packages

Maintenance27

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity67

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

2134d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6dd29721ad2a0f8213af0e40469f7874edb8b359784112a626c324921bc354ab?d=identicon)[malven](/maintainers/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

[lewisjenkins/craft-dynamic-fields

Populate Craft fields with dynamic data using the power of Twig.

14667.0k](/packages/lewisjenkins-craft-dynamic-fields)[nystudio107/craft-minify

A simple plugin that allows you to minify blocks of HTML, CSS, and JS inline in Craft CMS templates.

37461.2k29](/packages/nystudio107-craft-minify)[jalendport/craft-preparse

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

1086.4k](/packages/jalendport-craft-preparse)[craftpulse/craft-colour-swatches

Let clients choose from a predefined set of colours and utilise associated colour codes and class names in your templates.

3530.8k2](/packages/craftpulse-craft-colour-swatches)[verbb/footnotes

Adds a footnotes feature to CKEditor fields and Twig templates.

213.3k](/packages/verbb-footnotes)

PHPackages © 2026

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