# Styling of radio groups

**URL:** <https://community.weweb.io/t/styling-of-radio-groups/6279>\
**Category:** How do I?\
**Tags:** design\
**Created:** [January 9, 2024, 8:28am UTC](https://community.weweb.io/t/styling-of-radio-groups/6279 "2024-01-09T08:28:18Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\
**Post date:** [January 9, 2024, 8:28am UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/1 "2024-01-09T08:28:18Z")

</div>

Hi,

I’m trying to figure out how to get the radio group to be styled in the same way as this (here I’ve used the single radio buttons):

![radio group](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/bcf487490e3c29284efd4f42bd45e6969287e428.png)

I need to have 2 x 5 buttons with text and icon, where you can only select one of them.

Is it possible to style the radio group in this way, or is there a way to group the single radio buttons?

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [January 9, 2024, 11:43am UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/2 "2024-01-09T11:43:10Z")

</div>

It seems like the single radio element from the UI kit was made to allow customization but is build on top of a checkbox input and not a radio input.

I will create a ticket internally, for now I think the best way to do it would be to create your own no code component by combining multiple checkbox and handling the logic yourself in the component with a variable so you can store the value and reset the others checkbox when one is checked.

---

<div class="post-metadata">

**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\
**Post date:** [January 9, 2024, 11:45am UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/3 "2024-01-09T11:45:57Z")

</div>

Thanks Alexis!

Yeah, I figured that was the case 🙂

---

<div class="post-metadata">

**Author:** ![shrek-perpetual](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/shrek-perpetual/32/8342_2.png) [@shrek-perpetual](https://community.weweb.io/u/shrek-perpetual)\
**Post date:** [April 3, 2024, 5:52pm UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/4 "2024-04-03T17:52:47Z")

</div>

> [@Alexis](#):
>
> It seems like the single radio element from the UI kit was made to allow customization but is build on top of a checkbox input and not a radio input.

Was there any update on this? This still seems to be the case. It would be ideal to have it be radio input field with option to assign it to a group so that it does not require custom variables to work

---

<div class="post-metadata">

**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\
**Post date:** [April 3, 2024, 5:58pm UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/5 "2024-04-03T17:58:33Z")

</div>

I just cam across this today as well and was confused at how to go about styling the radio button. It seems blue is the only color you can use lol

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [April 3, 2024, 7:33pm UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/6 "2024-04-03T19:33:20Z")

</div>

Hey everyone, we’re working on a revamp of the Radio Group currently. It’s going to be the first component that we redefine using our new principles that will allow more customizability. We are hoping to release it in a few weeks.

---

<div class="post-metadata">

**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\
**Post date:** [April 9, 2024, 3:34pm UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/7 "2024-04-09T15:34:36Z")

</div>

Thanks for the update Luka - I can’t wait to see the new version!

---

<div class="post-metadata">

**Author:** ![Etienne](https://avatars.discourse-cdn.com/v4/letter/e/9fc348/32.png) [@Etienne](https://community.weweb.io/u/Etienne)\
**Post date:** [September 18, 2024, 10:57am UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/8 "2024-09-18T10:57:35Z")

</div>

Hi Luka,  
Do you have an update on the component ? thanks

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [September 18, 2024, 11:22am UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/9 "2024-09-18T11:22:26Z")

</div>

Yes, the Radio Group should come shortly after the release of next week(September 25th).

---

<div class="post-metadata">

**Author:** ![Fix](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fix/32/8212_2.png) [@Fix](https://community.weweb.io/u/Fix)\
**Post date:** [December 9, 2024, 5:53pm UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/10 "2024-12-09T17:53:47Z")

</div>

Hi @luka ,

Do youhave an update for the new radio ? (or any other component - select /multi-select…)

---

<div class="post-metadata">

**Author:** ![Kat](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kat/32/5809_2.png) [@Kat](https://community.weweb.io/u/Kat)\
**Post date:** [December 17, 2024, 12:45pm UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/11 "2024-12-17T12:45:41Z")

</div>

Hi, facing the same challenge. Any suggestions how to get rid of the blue?

---

<div class="post-metadata">

**Author:** ![celtic\_saint](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/celtic_saint/32/13027_2.png) [@celtic\_saint](https://community.weweb.io/u/celtic_saint)\
**Post date:** [March 24, 2025, 9:00pm UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/12 "2025-03-24T21:00:41Z")

</div>

Chiming in since this is getting stale. I created a sandbox project to get a radio group to work. I tried using the AI editor to see what it would come up with. I’ve attached the output. It is not the radio group element in the basic layout. It has the radio group created by AI editor on top and the radio group from the basic layout on bottom (which I added). I cut the layout tree so everyone could see the options and also the editor when I clicked on the radio item in the tree. Notice under input type it is blank. Any insight on what is going on would help us plan on what to use in our apps. Thanks

 ![differentradios](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8f693916844481613193cf13e00e4a5a731b8e9a.jpeg)

---

<div class="post-metadata">

**Author:** ![javierlaborde](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/javierlaborde/32/15842_2.png) [@javierlaborde](https://community.weweb.io/u/javierlaborde)\
**Post date:** [January 13, 2026, 2:52pm UTC](https://community.weweb.io/t/styling-of-radio-groups/6279/13 "2026-01-13T14:52:57Z")

</div>

any updates on this? I cannot find any properties to style my radio groups…
