# Radio Button

**URL:** <https://forums.fusetools.com/t/radio-button/6221>\
**Category:** Show and Tell\
**Created:** [April 4, 2016, 4:36pm UTC](https://forums.fusetools.com/t/radio-button/6221 "2016-04-04T16:36:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Huda\_Dawoud](https://avatars.discourse-cdn.com/v4/letter/h/ba8739/32.png) [@Huda\_Dawoud](https://forums.fusetools.com/u/Huda_Dawoud)\
**Post date:** [April 4, 2016, 4:36pm UTC](https://forums.fusetools.com/t/radio-button/6221/1 "2016-04-04T16:36:55Z")

</div>

Hi, Since Fuse doesn’t have radio buttons yet, I’ve implemented my own radio buttons, and here is my code:

```auto
<App Theme="Basic">
    <JavaScript>
        var Observable = require('FuseJS/Observable');

        var options = Observable();
        options.add({option: "option 1", visibility: "Hidden"});
        options.add({option: "option 2", visibility: "Hidden"});
        options.add({option: "option 3", visibility: "Hidden"});
        options.add({option: "option 4", visibility: "Visible"});

        function myHandler(args) {

            for (var item in options["_values"]) {

                if(args.message == options["_values"][item]["option"].toString()){

                    var index = options.indexOf(options["_values"][item]);
                    var item = {option: options["_values"][item]["option"].toString() , visibility: "Visible"};
                    options.replaceAt(index, item);
                 }
                 else {
                     var index = options.indexOf(options["_values"][item]);
                    var item = {option: options["_values"][item]["option"].toString() , visibility: "Hidden"};
                    options.replaceAt(index, item);
                 }
            }

        }

        module.exports = {
            options : options,
            myHandler:myHandler
        }
    </JavaScript>

    <StackPanel Background="#FFF" Margin="30" ItemSpacing="7">
        <Each Items="{options}">
            <StackPanel Background="#FFF" Margin="5">
                <Match Value="{visibility}">
                    <Case String="Hidden">
                        <HiddenRadioButton Text="{option}"/>
                    </Case>
                    <Case String="Visible">
                        <VisibleRadioButton Text="{option}"/>
                    </Case>
                </Match>
            </StackPanel>
        </Each>
    </StackPanel>

    <StackPanel ux:Class="HiddenRadioButton" ux:Name="self" Orientation="Horizontal" ItemSpacing="5">
        <string ux:Property="Text" />

        <UserEvent Name="ClickingEvent"/>
        <OnUserEvent Name="ClickingEvent" Handler="{myHandler}" />

        <Circle Width="25" Height="25" Color="#FFF">
            <DropShadow />
            <Circle ux:Name="SmallCircle" Width="15" Height="20" Color="#000" Visibility="Hidden" Alignment="Center"/>
        </Circle>
        <Text ux:Name="option_text" TextColor="#000" FontSize="20" Value="{Property self.Text}" Alignment="VerticalCenter"/> 

        <Clicked>
            <RaiseUserEvent Name="ClickingEvent">
                    <UserEventArg Name="message" StringValue="{Property self.Text}" />
            </RaiseUserEvent>
        </Clicked>
    </StackPanel>

    <StackPanel ux:Class="VisibleRadioButton" ux:Name="self" Orientation="Horizontal" ItemSpacing="5">
        <string ux:Property="Text" />

        <UserEvent Name="ClickingEvent"/>
        <OnUserEvent Name="ClickingEvent" Handler="{myHandler}" />

        <Circle Width="25" Height="25" Color="#FFF">
            <DropShadow />
            <Circle ux:Name="SmallCircle" Width="15" Height="20" Color="#000" Visibility="Visible" Alignment="Center"/>
        </Circle>
        <Text ux:Name="option_text" TextColor="#000" FontSize="20" Value="{Property self.Text}" Alignment="VerticalCenter"/> 

        <Clicked>
            <RaiseUserEvent Name="ClickingEvent">
                    <UserEventArg Name="message" StringValue="{Property self.Text}" />
            </RaiseUserEvent>
        </Clicked>
    </StackPanel>

</App>

```

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [April 4, 2016, 6:11pm UTC](https://forums.fusetools.com/t/radio-button/6221/2 "2016-04-04T18:11:20Z")

</div>

Cool! 🙂

You should make a github repo and add it to [https://github.com/vinkla/awesome-fuse](https://github.com/vinkla/awesome-fuse)

---

<div class="post-metadata">

**Author:** ![treviz](https://avatars.discourse-cdn.com/v4/letter/t/dbc845/32.png) [@treviz](https://forums.fusetools.com/u/treviz)\
**Post date:** [July 10, 2018, 10:20am UTC](https://forums.fusetools.com/t/radio-button/6221/3 "2018-07-10T10:20:30Z")

</div>

Great One!! Thank you very much!  
I improved your version a bit, so that the Userexperience is a bit better:  
In your version, the change only works by clicking a small place.  
I set the click event into the panel, so that the space for clicking is a bit bigger and the Userexperience a bit better 🙂

```
    <StackPanel Margin="30,10,30,10" Alignment="Center" ItemSpacing="7" Orientation="Horizontal">
        <Each Items="{options}">
            <StackPanel Background="#fff" Margin="5">
            	<Clicked>
		            <RaiseUserEvent EventName="ClickingEvent">
		                    <UserEventArg Name="message" StringValue="{option}" />
		            </RaiseUserEvent>
		        </Clicked>
                <Match Value="{visibility}">
                    <Case String="Collapsed">
                        <HiddenRadioButton Text="{option}"/>
                    </Case>
                    <Case String="Visible">
                        <VisibleRadioButton Text="{option}"/>
                    </Case>
                </Match>
            </StackPanel>
        </Each>
    </StackPanel>

<UserEvent ux:Name="ClickingEvent"/>
<OnUserEvent EventName="ClickingEvent" Handler="{myHandler}"/>
		

    <StackPanel ux:Class="HiddenRadioButton" ux:Name="self" Orientation="Vertical" Padding="5" >
        <string ux:Property="Text" />

        <Circle Width="20" Height="20" Color="#FFF">
            <DropShadow />
            <Circle ux:Name="SmallCircle" Width="8" Height="8" Color="#34495E" Visibility="Collapsed" Alignment="Center"/>
        </Circle>
        <Text Margin="0,10,0,0" ux:Name="option_text" TextColor="#ccc" FontSize="14" Value="{Property self.Text}" Alignment="VerticalCenter" />

        
    </StackPanel>

    <StackPanel ux:Class="VisibleRadioButton" ux:Name="self" Orientation="Vertical" Padding="5">
        <string ux:Property="Text" />

        <Circle Width="20" Height="20" Color="#FFF">
            <DropShadow />
            <Circle ux:Name="SmallCircle" Width="8" Height="8" Color="#34495E" Visibility="Visible" Alignment="Center"/>
            </Circle>
        <Text Margin="0,10,0,0" ux:Name="option_text" TextColor="#34495E" FontSize="14" Value="{Property self.Text}" Alignment="VerticalCenter"/>
		

    </StackPanel>
```