Arrange Radio Buttons Inline

Introduction

To display radio button selections in a single line, incorporate the following CSS snippet into a Custom HTML element. This approach enhances the visual layout and aligns with streamlined form designs. See the example configuration below:

<style>
    div[id^='yourFieldID'] label {
        width: unset;
        padding: 10px;
        display: inline;
    }
</style>

How does it work?

To apply the above configuration to your Joget app, follow the steps below:

1. Replace yourFieldID In the selector with the actual ID of your radio button field. This ID uniquely identifies the group of radio buttons in your form.
2. Add this CSS to a Custom HTML element in your Joget application to modify the display properties of the labels associated with each radio button.

The radio buttons will appear side by side, forming a neat, horizontal line. This layout is particularly useful for forms where space efficiency and aesthetic simplicity are priorities. By adjusting the CSS, you can tailor the inline display of radio buttons better to fit your application's design and user experience requirements.

See the results below:

• Before:
  
• After: