Display Checkboxes or Radios in Columns – WS Form

Display Checkboxes or Radios in ColumnsPRO

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):

  1. Click the field settings icon. This will open up the field settings sidebar.WS Form - Radio Field - Settings Icon
  2. Under the ‘Layout’ section of the sidebar is the ‘Orientation’ setting. Select ‘Grid’.WS Form - Radio Field - Layout - Orientation - Grid
  3. 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:WS Form - Radio Field - Layout - Orientation - Grid - Settings
  4. 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’.
  5. Click ‘Save’ and then click ‘Preview’ to try your grid configuration.