PHPackages                             el-schneider/statamic-choices - 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. [Utility & Helpers](/categories/utility)
4. /
5. el-schneider/statamic-choices

ActiveStatamic-addon[Utility & Helpers](/categories/utility)

el-schneider/statamic-choices
=============================

Card-style choice fieldtype for Statamic

v0.1.1(1mo ago)081[6 PRs](https://github.com/el-schneider/statamic-choices/pulls)MITPHPCI passing

Since May 9Pushed yesterdayCompare

[ Source](https://github.com/el-schneider/statamic-choices)[ Packagist](https://packagist.org/packages/el-schneider/statamic-choices)[ Fund](https://www.buymeacoffee.com/el.schneider)[ RSS](/packages/el-schneider-statamic-choices/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (2)Dependencies (4)Versions (12)Used By (0)

[![Statamic Choices](images/ch_banner.png)](images/ch_banner.png)

Statamic Choices
================

[](#statamic-choices)

> Help editors make better decisions. Turn radios and checkboxes into visual choice cards.

A plain radio group asks editors to pick a word. **Choices** lets you show what they're actually picking — an image, a description, or trusted custom HTML when words won't cut it.

Features
--------

[](#features)

- **Single or multiple**: Behaves like radios or checkboxes
- **Rich cards**: Label, image, description, or some fine custom HTML per option
- **Two variants**: Content cards for text-led choices, image cards when the picture *is* the choice
- **Frontend-ready**: Augments to full option objects with resolved assets

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

[](#requirements)

- Statamic 5 or 6
- PHP 8.3+

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

[](#installation)

```
composer require el-schneider/statamic-choices
```

Usage
-----

[](#usage)

Add a **Choices** field to your blueprint and configure the available options.

### Single choice

[](#single-choice)

```
plan:
  type: choices
  display: Plan
  mode: single
  card_width: 50
  variant: content
  options:
    - value: basic
      label: Basic
      image: assets::cards/basic.svg
      description: Simple publishing workflow for small teams.
    - value: pro
      label: Pro
      image: assets::cards/pro.svg
      description: More automation and editorial flexibility.
      use_html: true
      html:
        code: 'Popular'
    - value: enterprise
      label: Enterprise
      image: assets::cards/enterprise.svg
      description: Advanced controls for large organizations.
```

Saved value:

```
plan: pro
```

### Multiple choices

[](#multiple-choices)

```
addons:
  type: choices
  display: Add-ons
  mode: multiple
  card_width: 33
  variant: content
  options:
    - value: analytics
      label: Analytics
      image: assets::cards/analytics.svg
      description: Include dashboard and conversion reporting.
    - value: support
      label: Priority support
      image: assets::cards/support.svg
      description: Faster response times from the support team.
```

Saved value:

```
addons:
  - analytics
  - support
```

Configuration Reference
-----------------------

[](#configuration-reference)

### Field settings

[](#field-settings)

SettingValuesDefaultDescription`mode``single`, `multiple``single`Whether the field behaves like radios or checkboxes.`variant``content`, `image``content`Content cards show labels/text. Image cards use full-bleed images.`card_width``100`, `50`, `33`, `25`, `20``100`Approximate card width before wrapping.`image_aspect``1/1`, `4/3`, `16/9``1/1`Image card aspect ratio. Only used by `variant: image`.`default`scalar or YAML array—Default selected value(s).### Option settings

[](#option-settings)

SettingDescription`value`Stored value. Must be unique.`label`Human-readable label shown in the control panel and augmented output. Falls back to `value`.`image`Optional Statamic asset. Use normal asset IDs like `assets::cards/basic.svg`.`description`Optional supporting text for content cards.`use_html`Enables trusted custom HTML for content cards. When enabled, HTML replaces image and description.`html`Trusted HTML rendered inside the card. No Antlers rendering.Custom HTML
-----------

[](#custom-html)

Content cards can swap their image and description for trusted custom HTML. Intended for blueprint configuration — not editor input. No Antlers.

```
options:
  - value: pro
    label: Pro
    use_html: true
    html:
      code: 'Popular'
```

Labels and selection controls stay under fieldtype control.

Image Cards
-----------

[](#image-cards)

Image cards are useful for visual presets, colorways, layouts, or other choices where the image is the interface.

```
layout:
  type: choices
  mode: single
  variant: image
  card_width: 25
  image_aspect: 4/3
  options:
    - value: editorial
      label: Editorial
      image: assets::layouts/editorial.jpg
    - value: portfolio
      label: Portfolio
      image: assets::layouts/portfolio.jpg
```

In image mode, labels are used for tooltips and accessible names. Descriptions and custom HTML are ignored.

Frontend Usage
--------------

[](#frontend-usage)

The field stores only selected values. When augmented, it returns the selected option data.

### Single mode

[](#single-mode)

```
{{ plan }}
  {{ label }}
  {{ if image }}{{ /if }}
  {{ if description }}{{ description }}{{ /if }}
{{ /plan }}
```

Augmented shape:

```
[
    'value' => 'pro',
    'label' => 'Pro',
    'use_html' => false,
    'image' => Statamic\Contracts\Assets\Asset::class,
    'description' => 'More automation and editorial flexibility.',
    'html' => null,
]
```

### Multiple mode

[](#multiple-mode)

```
{{ addons }}

    {{ label }}
    {{ if image }}{{ /if }}
    {{ if description }}{{ description }}{{ /if }}

{{ /addons }}
```

Multiple selections are returned in the option order from the blueprint.

Notes
-----

[](#notes)

- Unknown saved values are ignored.
- Unprefixed image paths only resolve when exactly one asset container is configured. Prefer explicit IDs like `assets::path/to/image.svg`.

Development
-----------

[](#development)

```
npm run build
./vendor/bin/pest
./vendor/bin/pint --test
npm run format:check
```

License
-------

[](#license)

MIT

###  Health Score

37

—

LowBetter than 81% of packages

Maintenance97

Actively maintained with recent releases

Popularity8

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity30

Early-stage or recently created project

 Bus Factor1

Top contributor holds 59.6% 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 ~0 days

Total

2

Last Release

31d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/81a231c7730414820ac67caf7b30bea0de0d6af3775ec941a07ee5dc697f442a?d=identicon)[mail@jonaslist.de](/maintainers/mail@jonaslist.de)

---

Top Contributors

[![el-schneider](https://avatars.githubusercontent.com/u/26460248?v=4)](https://github.com/el-schneider "el-schneider (34 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (11 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (11 commits)")[![ito-ito-ito-ito](https://avatars.githubusercontent.com/u/260886217?v=4)](https://github.com/ito-ito-ito-ito "ito-ito-ito-ito (1 commits)")

---

Tags

checkboxescmscontrol-paneleditor-experiencefieldtypelaravelphpradio-buttonsstatamicstatamic-addonvisual-editor

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/el-schneider-statamic-choices/health.svg)

```
[![Health](https://phpackages.com/badges/el-schneider-statamic-choices/health.svg)](https://phpackages.com/packages/el-schneider-statamic-choices)
```

###  Alternatives

[statamic/seo-pro

68488.6k](/packages/statamic-seo-pro)[statamic-rad-pack/runway

Eloquently manage your database models in Statamic.

135212.4k7](/packages/statamic-rad-pack-runway)[statamic/ssg

Generate static sites with Statamic.

254319.5k](/packages/statamic-ssg)[rias/statamic-redirect

29322.9k](/packages/rias-statamic-redirect)[spatie/statamic-responsive-images

Responsive Images for Statamic

113250.6k](/packages/spatie-statamic-responsive-images)[marcorieser/statamic-livewire

A Laravel Livewire integration for Statamic.

23100.9k12](/packages/marcorieser-statamic-livewire)

PHPackages © 2026

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