Lock Configuration Options - Radio Buttons

KJHeartbreaker · September 8, 2021, 3:45pm

I am sorry if this has been asked before, but on our Universal Login, I am looking to implement some preferences that would be best suited to radio buttons. I am having a really hard time finding any documentation on this, though.

Basically, it would look like this:

{
    type: "checkbox",
    name: "option_A",
    prefill: "false",
    placeholder: "I would like to receive all updates",
},
{
    type: "checkbox",
    name: "option_B",
    prefill: "false",
    placeholder: "I would like to receive some updates",
},
{
    type: "checkbox",
    name: "option_C",
    prefill: "false",
    placeholder: "I would like to receive no updates",
}

Obviously, in the example, I have added checkboxes per the documentation here: Lock Configuration Options

I have noticed that there are styles for radio input types -
Screen Shot 2021-09-08 at 9.40.49 AM

However, if I change the type to “radio”, all I get is the box with the prefill -

Is it possible to set up a group of radio buttons? What am I missing?

Thanks in advance!

dan.woda · September 9, 2021, 11:13pm

Hi @KJHeartbreaker,

Welcome to the Auth0 Community!

It doesn’t look radio buttons is an option. For reference:

github.com

auth0/lock/blob/a30b27eee69654ecb30a023a15dc4c9dd5914c2a/src/connection/database/index.js#L176


      
            (typeof prefill != 'string' || !prefill) &&
            typeof prefill != 'function'
          ) {
            l.warn(
              opts,
              'When provided, the `prefill` property of an element of `additionalSignUpFields` must be a non-empty string or a function.'
            );
            prefill = undefined;
          }
          
          
const types = ['select', 'text', 'checkbox', 'hidden'];
          if (type != undefined && (typeof type != 'string' || types.indexOf(type) === -1)) {
            l.warn(
              opts,
              `When provided, the \`type\` property of an element of \`additionalSignUpFields\` must be one of the following strings: "${types.join(
                '", "'
              )}".`
            );
            type = undefined;
          }

It seems like the best option would be a select field.

https://auth0.com/docs/libraries/lock/lock-configuration#select-field

KJHeartbreaker · September 13, 2021, 6:45pm

Awesome! We’ll give that a go, and thanks a bunch!

dan.woda · September 13, 2021, 7:18pm

No problem, let us know how it goes.

system · September 28, 2021, 7:18pm

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
How to option lock option checkbox as radio button Help login-experience , new-universal-login-experience	4	880	June 7, 2023
additionalSignUpFields checkbox appearing as input type=text Help lock	2	3728	March 2, 2018
Customize Universal Login (Lock) with additionalSignUpFields Help additionalsignupfiel	7	10375	January 23, 2020
Pass phone number to lock widget in passwordless mode Help lock	3	3450	August 15, 2019
Select field as multiple selector Help lock , signup , universal-login	4	2798	October 10, 2020

Lock Configuration Options - Radio Buttons

Related topics