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 = '
Link to comment
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
Link to comment
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
Link to comment
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

  • Create New...