It is possible to use the grid orientation setting in checkbox and radio fields to display checkboxes or radios in a grid format.
WS Form form layouts typically work with a 12 column grid (Learn more about responsive layouts). In addition to the grid, we also support different layouts for different breakpoints. A breakpoint represents a device screen width such as a mobile device, tablet, laptop or desktop computer.
WS Form supports different checkbox or radio grid configurations for each breakpoint. This means you can have a single column layout on mobile and a multi column layout on larger screen sizes, making the layout fully responsive.
Demo
If you are on a computer, drag your web browser width to view the following responsive demo.
Tutorial
To add columns to a checkbox or radio field (this includes e-commerce price checkbox and price radio fields):
- Click the field settings icon. This will open up the field settings sidebar.
- Under the Layout section of the sidebar is the Orientation setting. Select Grid.
- After selecting Grid, the breakpoints for the current framework will be shown. For each breakpoint you can configure a column width. The full width will result in a single column format. The 1/2 with will result in a two column format, and so on. If you choose a column width on the smallest breakpoint, the larger breakpoints will inherit that same width unless you manually override that with a different value. An example configuration is shown below:
- The Optimize button will enable if WS Form can help with improving the efficiency of the breakpoint configuration. Simply click on Optimize and WS Form will automatically reconfigure the widths. If you want to reset all of the widths and start over with a new configuration, click Reset.
- Click Save and then click Preview to try your grid configuration.