How to display the list of values iterated in sightly as radio button?

Forum|Forum|2 years ago
October 29, 2023
1 reply
783 views

Hi Everyone,

I have a list of text iterated in Sightly (I am using multifield and iterating using data-sly-list ). PFA screenshots.

Can anyone let me know how to make them radio button and when a user selects the options, each option should save a value for that node.
Example:

If a user selects "textOne" it should save value "1"
If a user selects "textTwo" it should save value"2"

If a user selects "textThree" it should save value "3"

Sightly (htl logic) :

<sly data-sly-list.options="${model.radiobuttons}">
<div>${options.text}</div><br>
</sly>

@community @developer-7

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Mahedi_Sabuj

You can use <variable>List identifier to achieve 1-based index in the loop.
https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#226-list

<sly data-sly-list.option="${model.radiobuttons}">
  <label>
    <input name="radio-button"
      value="${optionList.count}"
      type="radio"/>
    <span>${option.text}</span>
  </label>
</sly>

Mahedi_Sabuj

Accepted solution

Community Advisor

You can use <variable>List identifier to achieve 1-based index in the loop.
https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#226-list

<sly data-sly-list.option="${model.radiobuttons}">
  <label>
    <input name="radio-button"
      value="${optionList.count}"
      type="radio"/>
    <span>${option.text}</span>
  </label>
</sly>

Mahedi Sabuj

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded