radio buttons do not work

[hsweet]

I can't get radio buttons to work in this theme. The code works properly using Quark theme. In big picture it only displays the values, in this example

Markdown
Twig

not

O Markdown
O Twig

as it should

form:
    action: /home
    name: contact-form
    fields:
        name:
            label: Name
            placeholder: 'Enter your name'
            autocomplete: 'on'
            type: text
            validate:
                required: true
        email:
            label: Email
            placeholder: 'Enter your email address'
            type: email
            validate:
                required: true
        message:
            label: Message
            placeholder: 'Enter your message'
            type: textarea
            validate:
                required: true
        my_choice:
            type: radio
            label: Choice
            default: markdown
            options:
                markdown: Markdown
                twig: Twig

etc...

It outputs this html:

            <div class="field">
                    <div class="form-field  ">
          <div class="form-data"
          data-grav-field="radio"
  data-grav-disabled=""
  data-grav-default="&quot;markdown&quot;"
    >
                          
        <div class="radio  ">
            <input type="radio"
                   value="markdown"
                   id="my_choice-markdown"
                   name="data[my_choice]"
                   class=" "
                   checked="checked"                                                                      />
            <label style="display: inline" class="inline" for="my_choice-markdown">Markdown</label>
        </div>
            
        <div class="radio  ">
            <input type="radio"
                   value="twig"
                   id="my_choice-twig"
                   name="data[my_choice]"
                   class=" "
                                                                                        />
            <label style="display: inline" class="inline" for="my_choice-twig">Twig</label>
        </div>
                    </div>
  </div>
                  </div>
                                      
            <div class="field">
                    <div class="form-field  ">
          <div class="form-data"
          data-grav-field="radio"
  data-grav-disabled=""
  data-grav-default="null"
    >

[tranduyhung]

The author of this HTML template doesn't show the input fields in purpose:

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

as you can check at https://html5up.net/big-picture or https://html5up.net/uploads/demos/big-picture/assets/css/main.css.

You need to add your own CSS styles to override this.

[hsweet]

Thanks. I was able to get the circles to show by commenting out the appearance: none bits, but the label (Choice) still does not display. Do you know why display of radio buttons was removed from big-picture?

            type: radio
            label: Choice
            default: markdown
            options:
                markdown: Markdown
                twig: Twig

[tranduyhung]

With your code above, I can see the labels. Check your site with your browser's developer tool to see what CSS styles are applied to the labels.

[pamtbaau]

The author of this HTML template doesn't show the input fields in purpose:

I think this is a very strict approach of creating Grav themes based on HTML5UP templates. HTML5UP templates are not meant to be catering for each and every situation. It is therefor up to the theme developer to decide how much extra effort should be put in to turn it into a more functional theme.

I presume reCaptcha, Turnstile, select, radio are quite common field types and should therefor not break and/or require extra code. Please also consider that many theme users are not developers and will not be able to fix the issue.