Jump to content

Set Markup inside a InputfieldRadio Option Label

Recommended Posts

Hi Guys

How can i set markup inside a Inputfieldradio Option Label? I am using unicode emoticons as labels at the moment, but this emoticons dont work well in some browsers(especially IE). Now i decided to use images, but it isn't possible to add html for label. I think I can alter the behavior of the InputfieldRadios::render function with hooks? To achieve what I want. But I don't know how to do this.

// Unicode Smiley Types$smile_1 = '

Share this post

Link to post
Share on other sites

Short answer? Build the Markup on your own. You could still use the form api to potentially parse any incoming data.

Share this post

Link to post
Share on other sites

The longer answer: yes, a hook should work, but you'll have to modify the html output of InputfieldRadios::render. Quick&Dirty:

/* site/ready.php */

wire()->addHookAfter('InputfieldRadios::render', null, 'addOptionImages');

function addOptionImages($event) {
  $obj = $event->object;
  if($obj->name == "NameOfYourRadiosField") {
    $opts = $obj->getOptions();
    $ret = $event->return;

    foreach($opts as $key => $value) {
      $id = $obj->id . "_" . wire('sanitizer')->name($key); 
      $ret = preg_replace(
        '$1' . "<img style='display: inline;' src='$value'>",

    $event->return = $ret;

The "display: inline" style is needed to keep the image on the same line as the radio button.

  • Like 2

Share this post

Link to post
Share on other sites

You could use the custom attribute options argument for radios, checkboxes etc in the addOption().

$field->addOption($key, $value, array("class" => "customEmoClass"));

The rest is CSS and or JS.

So you could do it like this. The label can be empty, and the $value would be the attr array.

$evaluationVals = array(
    'sehr_befriedigend' => array("title" => "sehr befriedigend", "class" => "smily1"),
    'befriedigend' => array("title" => " befriedigend", "class" => "smily2"),
    'mittelmaessig_befriedigend' => array("title" => "mittelmässig befriedigend", "class" => "smily3"),
    'unbefriedigend' => array("title" => "unbefriedigend", "class" => "smily4"),

foreach ($evaluationVals as $key => $value) { 
      $field->addOption($key, "", $value); 
  • Like 1

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By dragan
      In page-edit view: If I wanted to display the total count of selections, is there an in-built PW method for this?
      e.g. let's say the default view is collapsed for a page reference field. I see the label "Services" but would like to see "Services (3)". I would know that three items are selected without opening the inputfield. And ideally after every change, the number gets updated (without page-reload).
      Did someone once built something similar?
    • By Harmen
      Hi all,
      I am trying to build a form in a module. So when the render() method is called, I build the form and I want to apply a custom markup, which is defined in an array.
      Unfortunately I can't remove some text in my label. Instead of a label I want an icon, but there is always some text next to my icon as you can see below:

      I don't know how, but my icon is placed in the label, and that's not what I want.
      My markup looks like this:
      static protected $markup = array( 'list' => "{out}\n", 'item' => "\n\t<div class='form-group input-group'>\n{out}\n\t</div>", 'item_label' => "<label class=input-group-addon>{out}</label>", 'item_icon' => "<span><i class='fa fa-fw fa-{name}' aria-hidden='true'></i></span>", 'item_content' => "{out}", 'item_error' => "\n<p class='field--error--message'>{out}</p>", 'item_description' => "\n<p class='field__description'>{out}</p>", //.... etc ); and results in this:
      <div class="form-group input-group"> <label class="input-group-addon"> <span> <i class="fa fa-fw fa-envelope" aria-hidden="true"></i> </span> E-Mail </label> <input id="Inputfield_contact_email" name="contact_email" class="form-control InputfieldMaxWidth" type="email" maxlength="512"> </div>  
      and what I want is:
      <div class="form-group input-group "> <span id="contact_form" class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span> <input required="" class="form-control" name="name" id="contact_form" type="text" value="" placeholder="Name"> </div> The only problem is that the code above is hard-coded and I don't know how to remove that piece of text next to my icon....
      Thanks in advance,
    • By modifiedcontent
      I have a simple front-end password update form like this:
      In the browser the label of the second field shows up as follows:
      I can't figure out what is changing the label, what is inserting /processwire/ and reformatting the thing. Is this something in PW? A "helpful" thing that browsers do?
      The problem disappears if I simply rename the second field to 'Confirm Password'.
      So my problem is solved, but I'll leave this here in case this is some kind of bug.
    • By Harmen
      I want to put some data in a table field, but if I put the label of the first table field, it gives an error:  Item 'feature' set to TableRows is not an allowed type
      Here is my code:
      foreach ($fetchAll as $fetch => $feature) { $productid = $feature["id_product"]; $pages = wire("pages")->get("productid=$productid"); $pages->of(false); // ensure output formatting is off $pages->Specification->feature = ($feature['name']); $pages->Specification->value = ($feature['value']); $pages->save(); } I tried to give the label other names, but it still doesn't work. How can this be solved?
  • Create New...