Support

Account

Home Forums Feature Requests Stylized UI for Radio Button with only two options

Solving

Stylized UI for Radio Button with only two options

  • The stylized UI for true false fields is great. And its also great that you can change the true false text to whatever you would like. However I would like a field for the Stylized UI all by itself.

    For instance I use a radio field for “Light” or “Dark” in many places on my sites. This field would look so much better if it was a stylized field like my true false options are. I know in theory I could just use the true false options but it is much easer if the value of the field returned “light” “dark” so they can easily be used in css classes.

  • You should look into creating a new field type https://www.advancedcustomfields.com/resources/creating-a-new-field-type/, or someone that knows how to.

    You could start by copying the functionality of the new radio field and instead of saving a value of 1 or 0 you could create field setting so that the on and off values can be defined when creating the field.

    You might also try opening a support ticket https://support.advancedcustomfields.com/new-ticket/ which has a better chance of reaching the developer.

  • Personally I would just use the true false field because this

    
    $value = 'dark'; // default 0/false value
    if (get_field('field_name')) {
      $value = 'light'; // 1/true value
    }
    

    Is much easier than creating a new field type.

    You could also add new field settings to the existing true false field https://www.advancedcustomfields.com/resources/adding-custom-settings-fields/ and then add a filter as well to the format field hook. Then you could set the return values when creating the field and return the values you want.

    Just some more ideas for achieving what your looking for.

  • I came across this while trying to solve a similar problem. In my case, I have a Taxonomy field as radio buttons that I would like to style more like the True/False UI.

    I thought it would be doable via some admin CSS, but the markup is such that there’s no way to target a checked input’s label. (The common way to do this is via adjacent selectors in CSS, but ACF outputs the radio button input as a child of its label, not a sibling, unfortunately.)

    It seems like this would be a logical change to the markup in ACF so that we would have more flexibility to “roll our own.” Unless I’m missing a possibility here?

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Stylized UI for Radio Button with only two options’ is closed to new replies.