setMarkup() does not work for Radio buttons (InputfieldRadios)

[Valery]

Hi people,

I've been trying to tailor the HTML output of my InputfieldRadios, to no avail so far. Here's the code:

$field = $modules->get("InputfieldRadios");
$field->label = 'Radio controls';
$field->attr('id+name', 'radios');
$field->addOption('1', 'Option 1');
$field->attr('value', '1');
$field->addOption('2', 'Option 2');

$form->append($field);        

$form->setMarkup(array(
                'list' => "<div {attrs}>{out}</div>",
                'item' => "<div {attrs}>{out}</div>"
            ));
 

However, I still keep getting <ul> for the radio buttons:

<ul class='InputfieldRadiosStacked'>
                    <li><label><input checked='checked' type='radio' name='radios' id='radios_1' value='1' /> Option 1</label></li>
                    <li><label><input type='radio' name='radios' id='radios_2' value='2' /> Option 2</label></li>
                </ul> 

Is there a way to fix it? I looked into how the admin backend is styled and radio buttons are wrapped in <ul> in there, though the list bullets are removed.

But I'd like my radio buttons wrapped in <div>'s rather than <ul>'s.

Thank you for any hints.

[ryan]

The setMarkup() is just for adjusting the markup of Inputfield lists, not the markup of individual Inputfields. That markup is not currently changeable programatically. Your best bet would be to either:

1) the clean way would be to make a copy of InputfieldRadios => InputfieldRadiosCustom, install as a new module and make it produce the markup you want.

2) the quick n' dirty way would be to replace the <li>'s with <div>'s by hooking after InputfieldRadios::render

wire()->addHookAfter('InputfieldRadios::render', function(HookEvent $e) {
  $e->return = str_replace(
    array('<li ', '</li>'), 
    array('<div ', '</div>'), 
    $e->return); 
}); 

[Valery]

Thanks a lot, Ryan! I'll make use of number 2 for now.