WHMCS Changing <select> input to multiple boxes - dropdown

Question

https://prnt.sc/vo986i - this is the default select dropdown menu that WHMCS provides.
https://prnt.sc/vo98m5 - this is the design I made in Figma.
I don't often work with WHMCS, I want to keep the functionality and just make it a multiple boxes choice rather than a dropdown.
{if $pricing.type eq "recurring"}
<div class="field-container">
<div class="form-group">
<label for="inputBillingcycle">{$LANG.cartchoosecycle}</label>
<select name="billingcycle" id="inputBillingcycle" class="form-control select-inline" onchange="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}">
{if $pricing.monthly}
<option value="monthly"{if $billingcycle eq "monthly"} selected{/if}>
{$pricing.monthly}
</option>
{/if}
{if $pricing.quarterly}
<option value="quarterly"{if $billingcycle eq "quarterly"} selected{/if}>
{$pricing.quarterly}
</option>
{/if}
{if $pricing.semiannually}
<option value="semiannually"{if $billingcycle eq "semiannually"} selected{/if}>
{$pricing.semiannually}
</option>
{/if}
{if $pricing.annually}
<option value="annually"{if $billingcycle eq "annually"} selected{/if}>
{$pricing.annually}
</option>
{/if}
{if $pricing.biennially}
<option value="biennially"{if $billingcycle eq "biennially"} selected{/if}>
{$pricing.biennially}
</option>
{/if}
{if $pricing.triennially}
<option value="triennially"{if $billingcycle eq "triennially"} selected{/if}>
{$pricing.triennially}
</option>
{/if}
</select>
</div>
</div>
{/if}
This is the code that WHMCS provides for the default billing cycle choice.
Thanks

Answer 1

Give this a go, it should work, changed the option values to radio boxes and stripped out the select box.
You will need to add your own classes for the design.
<div class="field-container">
<div class="form-group">
<label for="inputBillingcycle">{$LANG.cartchoosecycle}</label>
{if $pricing.monthly}
<input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="monthly" name="billingcycle" value="monthly"> {$pricing.monthly}
{/if}
{if $pricing.quarterly}
<input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="quarterly" name="billingcycle" value="quarterly"> {$pricing.quarterly}
{/if}
{if $pricing.semiannually}
<input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="semiannually" name="billingcycle" value="semiannually"> {$pricing.semiannually}
{/if}
{if $pricing.annually}
<input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="annually" name="billingcycle" value="annually"> {$pricing.annually}
{/if}
{if $pricing.biennially}
<input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="biennially" name="billingcycle" value="biennially"> {$pricing.biennially}
{/if}
{if $pricing.triennially}
<input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="biennially" name="billingcycle" value="biennially"> {$pricing.triennially}
{/if}
</div>
</div>
{/if}```