Summary: Input control shaped like a group of 5 stars.
Version: 2024-04-06a
Prerequisites: ExtensionHub
Status: Beta
Maintainer: Petko
License: MIT
Categories: Extensions Markup Forms
Users: (view? / edit)
Discussion: InputStar-Talk?

Input control shaped like a group of 5 stars.


This extension adds a "star" input field:

Rate page: (:input star rate:)

Rate page:

Under the hood, this markup is transformed into a group of 5 radio buttons with the same name, with values from 1 to 5. Clicking on a star selects one of the radio buttons and that value would then be submitted with the form.

The stars, colors, and interactivity, are only enabled via CSS (no JavaScript). The 5 radio buttons are wrapped in a <span> element to allow styling.


This extension requires ExtensionHub.

Place in the pmwiki/extensions directory on your server. Optionally you can unzip it.

Alternatively, you can clone the Git repo into pmwiki/extensions with such a command line:
git clone --depth=1


To enable the extension, navigate to SiteAdmin.ExtensionHub, locate the "InputStar" row and press "Edit". On the new page, check the checkbox "Enable configuration" and near the bottom press "Save".


Not applicable.


In a wiki page, use the input markup similarly to (:input radio name:):

Basic directive: (:input star vote1:)

Also possible: (:input star name=vote2:)

Pre-filled value: (:input star vote3 5:)

Also possible: (:input star name=vote4 value=2:)

Default value:
(:input default vote5 4:)
(:input star vote5:)

Value from a PTV:
(:input default source={*$FullName}:)
(:input star $:MyStarRate:)

Basic directive:

Also possible:

Pre-filled value:

Also possible:

Default value:

Value from a PTV:


  • There is no standard "star" input element; the PmWiki markup outputs a group of 5 radio buttons with emoji star labels and some CSS to style the "selected", "unselected" and "hover" colors.
  • The 5 radio buttons are wrapped in a <span> element to allow styling.
  • Attributes "id" "title", "checked", and label in the directive are ignored and replaced with values that apply to the individual radio buttons.
  • All other input star attributes are reapplied to the individual radio buttons in the group.
  • In JavaScript, to get the selected value, do something like:
    var star = document.querySelector('input[name="yourstarname"]:checked');
    var starvalue = star? star.value: "";
  • In JavaScript, attach "change" events to each radio input in the group.

To do / some day / maybe

If you have future plans or wishes for this recipe.

Change log / Release notes

  • 2024-04-06a: Add readme, hub form page, wording, fix release date.
  • 2024-04-06 First public release, ready to be tested.

See also

Cookbook /
ExtensionHub  Configuration panel for extensions (Experimental)
InputDefault  Demonstrates various ways to set the default values for form controls (in-core)
StarRater  5 star rating system (stable)
PmWiki /
Forms  How you can embed input forms into wiki pages


PmWiki extension written and maintained by Petko.


See discussion at InputStar-Talk?

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.