Radio buttons in form submission not showing (dark mode)

[geertjanknapen1]

Bug description

So I have a form with radio buttons, that contain 6 options.
Upon submitting the form I can see the correct selected radio option.
When I go to the submission, none of the radio buttons are selected.

The radio button should not be a required field. How would one go about resolving this? See the images below for a better understanding of the issue.

Blueprint:

The submission (we use AJAX):

The submission in Control Panel:

How to reproduce

Create a form.
Add radio buttons with a few options
Select one of the options and submit the form.
Look at the latest form submission in CP.
No radio button selected.

Logs

No response

Environment

Environment
Application Name: mysite
Laravel Version: 11.11.0
PHP Version: 8.3.8
Composer Version: 2.7.1
Environment: local
Debug Mode: ENABLED
URL: mysite.test
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: null
Cache: statamic
Database: mysql
Logs: stack / daily
Mail: smtp
Queue: sync
Session: file

Statamic
Addons: 3
Sites: 2 (English, Dutch)
Stache Watcher: Disabled
Static Caching: half
Version: 5.9.0 PRO

Statamic Addons
spatie/statamic-responsive-images: 5.0.0
statamic-rad-pack/meilisearch: 3.3.0
withcandour/aardvark-seo: 5.0.0

Installation

Existing Laravel app

Additional details

No response

[geertjanknapen1]

I've added the blueprint here:

tabs:
  main:
    display: Main
    sections:
      -
        fields:
          -
            handle: company_name
            field:
              placeholder: placeholder-company-name
              type: text
              display: 'Company name'
              localizable: false
              validate:
                - required
          -
            handle: first_name
            field:
              placeholder: placeholder-firstname
              type: text
              display: 'First name'
              localizable: false
              width: 50
          -
            handle: last_name
            field:
              placeholder: placeholder-lastname
              type: text
              display: 'Last name'
              localizable: false
              width: 50
          -
            handle: phonenumber
            field:
              input_type: tel
              placeholder: placeholder-phonenumber
              type: text
              display: Phonenumber
              localizable: false
              validate:
                - required
          -
            handle: email_address
            field:
              input_type: email
              placeholder: placeholder-email-address
              type: text
              display: 'Email address'
              localizable: false
              validate:
                - required
          -
            handle: more_information_about
            field:
              options:
                option_1: 'Option 1'
                option_2: 'Option 2'
                option_3: 'Option 3'
                option_4: 'Option 4'
                option_5: 'Option 5'
                option_6: 'Option 6'
              type: radio
              display: 'More information about'
              localizable: false
              validate:
                - sometimes
          -
            handle: question
            field:
              placeholder: placeholder-questions
              type: textarea
              display: Question
              localizable: false
              validate:
                - required

[duncanmcclean]

Which browser are you using?

Looking at your screenshot, it looks like it is showing as selected, but it's just hard to tell with the dark mode styles.

[geertjanknapen1]

@duncanmcclean This is Chrome, but I just tested it in light mode there, and it is indeed showing.
I guess it is just really hard to see, but the fields are also read-only which certainly does not help :)
Nice spot!

I do however vote for a change because not everyone has such good eyes as you.

Light mode:

Dark mode:

[duncanmcclean]

I don't blame you for not being able to see it 😅

[heidkaemper]

I think this is more of a Chrome issue. Because even in "vanilla" HTML, deactivated radio buttons are difficult to see:

Sure, the Statamic team could build a workaround and e.g. reduce the transparency for non-selected elements. However, I personally think that the browsers should solve this.

[duncanmcclean]

We had a look into this last week.

Unfortunatley, it seems like the only way for us to fix it is to do away with the native <input type="radio"> elements and implement them ourselves. 😞