# Radio Button Options Orientation?

**URL:** <https://community.weweb.io/t/radio-button-options-orientation/868>\
**Category:** How do I?\
**Created:** [July 25, 2022, 6:34pm UTC](https://community.weweb.io/t/radio-button-options-orientation/868 "2022-07-25T18:34:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![peteletkemansst](https://avatars.discourse-cdn.com/v4/letter/p/dc4da7/32.png) [@peteletkemansst](https://community.weweb.io/u/peteletkemansst)\
**Post date:** [July 25, 2022, 6:34pm UTC](https://community.weweb.io/t/radio-button-options-orientation/868/1 "2022-07-25T18:34:43Z")

</div>

How do I horizontally align radio button options?  
I only have three options and there is more room horizontally on the form.  
There does not seem to be a property to change this in the control.  
I suspect that some CSS would be needed.

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [July 26, 2022, 8:20am UTC](https://community.weweb.io/t/radio-button-options-orientation/868/2 "2022-07-26T08:20:50Z")

</div>

adding custom css can do the trick but you can also create your own radio button layout:

- create a variable to store the selected option, let’s call it `radio-value`
- add a column element, set the layout you prefer and bind the items with an array containing the radio options (someting like `[{label: 'option 1', value: 'opt1'},{label: 'option 2', value: 'opt2'}]`)
- in the column add a signle radio element
- set the initial value of the radio to a formula  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/6ec161d2ca3ded62f83b07aa31fbc663ba0e6ff6.png)
- add a workflow on the change event for the radio  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/ec2876277fb601acc0798c65321103a7e4a448d4.png)

result:  
 ![chrome_Hmc470iwrF](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f7044f0a7d70e3540608d68a490a62e333cf2b22.gif)

This way you have full control over the layout

---

<div class="post-metadata">

**Author:** ![peteletkemansst](https://avatars.discourse-cdn.com/v4/letter/p/dc4da7/32.png) [@peteletkemansst](https://community.weweb.io/u/peteletkemansst)\
**Post date:** [July 26, 2022, 11:34am UTC](https://community.weweb.io/t/radio-button-options-orientation/868/3 "2022-07-26T11:34:26Z")

</div>

Great thanks