# Creating a custom checkbox control using WhileTrue / While false and binding to an observable

**URL:** <https://forums.fusetools.com/t/creating-a-custom-checkbox-control-using-whiletrue-while-false-and-binding-to-an-observable/3074>\
**Category:** How-to Discussions\
**Created:** [April 4, 2016, 5:54pm UTC](https://forums.fusetools.com/t/creating-a-custom-checkbox-control-using-whiletrue-while-false-and-binding-to-an-observable/3074 "2016-04-04T17:54:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Maksymilian](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/maksymilian/32/111_2.png) [@Maksymilian](https://forums.fusetools.com/u/Maksymilian)\
**Post date:** [April 4, 2016, 5:54pm UTC](https://forums.fusetools.com/t/creating-a-custom-checkbox-control-using-whiletrue-while-false-and-binding-to-an-observable/3074/1 "2016-04-04T17:54:00Z")

</div>

Hi,

I’m trying to create a custom checkbox that will be used in an `<Each></Each>` loop. I creted it in an external `Checkmark.ux` file like this:

```xml
<Panel ux:Class="Checkmark" Focus.IsFocusable="true" ux:Name="chk">
    <bool ux:Property="Value" />
    <WhileFalse ux:Name="uncheckedState">
        <Change bgFill.Color="ColorCheckmarkInactiveBg" Easing="QuadraticInOut" Duration="0.1" />
        <Change shadowFill.Color="ColorDarkShadow" Easing="QuadraticInOut" Duration="0.1" />

        <Change tickLeftFill.Color="ColorCheckmarkInactiveTick" Easing="QuadraticInOut" Duration="0.1" />
        <Change tickRightFill.Color="ColorCheckmarkInactiveTick" Easing="QuadraticInOut" Duration="0.1" />
    </WhileFalse>

    <WhileTrue ux:Name="checkedState">
        <Change bgFill.Color="ColorSuccess" Easing="QuadraticInOut" Duration="0.1" />
        <Change shadowFill.Color="ColorSuccessShadow" Easing="QuadraticInOut" Duration="0.1" />

        <Change tickLeftFill.Color="ColorSuccessDarker" Easing="QuadraticInOut" Duration="0.1" />
        <Change tickRightFill.Color="ColorSuccessDarker" Easing="QuadraticInOut" Duration="0.1" />
    </WhileTrue>

    <WhilePressed>
        <Set Target="chk.Value" Value="true" />

        <Move X="2" Y="2" Target="tick" Easing="QuadraticInOut" Duration="0.1" />
        <Move X="2" Y="2" Target="tickBg" Easing="QuadraticInOut" Duration="0.1" />
        <Move X="1" Y="1" Target="tickBgShadow" Easing="QuadraticInOut" Duration="0.1" />
        <Change tickBgShadow.Width="42" Easing="QuadraticInOut" Duration="0.1" />
        <Change tickBgShadow.Height="42" Easing="QuadraticInOut" Duration="0.1" />
    </WhilePressed>

    <Panel X="8" Y="17" ux:Name="tick">
        <Rectangle Width="18" Height="5" CornerRadius="5" TransformOrigin="TopLeft">
            <SolidColor ux:Name="tickLeftFill" Color="ColorCheckmarkInactiveTick" />
            <Rotation Degrees="45" />
        </Rectangle>

        <Rectangle X="8.5" Y="13" Width="23" Height="5" CornerRadius="5" TransformOrigin="TopLeft">
            <SolidColor ux:Name="tickRightFill" Color="ColorCheckmarkInactiveTick" />
            <Rotation Degrees="-55" />
        </Rectangle>
    </Panel>

    <Circle ux:Name="tickBg" X="0" Y="0" Width="41" Height="41">
        <SolidColor ux:Name="bgFill" />
    </Circle>
    <Circle ux:Name="tickBgShadow" X="1" Y="2" Width="43" Height="43">
        <SolidColor ux:Name="shadowFill" />
    </Circle>
</Panel>

```

Now I want to use it in the loop like this:

```xml
<Each Items="{tasks}">
    <Checkmark X="116" Y="5" Value="{completed}" />
</Each>

```

The JS looks something like:

```auto
var Observable = require('FuseJS/Observable');
var Task = (function () {
    function Task(name, completed) {
        this.name = name;
        this.completed = completed;
    }
    return Task;
}());
var tasks = [
    new Task('Meditate', Observable(true)),
    new Task('Save some expenses', Observable(false)),
    new Task('Learn to type faster', Observable(false))
];
module.exports = {
    tasks: tasks
};

```

How can I make the checkbox “toggle” the value when clicked and also bind to the property in my JS?

Appreciate any help!

Cheers,

Maks

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [April 4, 2016, 6:03pm UTC](https://forums.fusetools.com/t/creating-a-custom-checkbox-control-using-whiletrue-while-false-and-binding-to-an-observable/3074/2 "2016-04-04T18:03:02Z")

</div>

You want to bind the `Value` property of `CheckBox` to the `WhileFalse` and `WhileTrue` like so:

```auto
<WhileFalse Value="{Property chk.Value}">.....<WhileFalse>
<WhileTrue Value="{Property chk.Value}">.....<WhileTrue>

```

And set the default value like so:

```auto
<Panel ux:Class="Checkmark" Focus.IsFocusable="true" ux:Name="chk" Value="false">

```

**Which doesn’t need to be an Observable btw**

You can also get rid of the `WhileFalse` completely by setting those properties to the actual elements, because the `WhileTrue` will change them via `Change` and when that `WhileTrue` is no longer active the elements will go back to their default state

Also if you’re on the latest fuse version you don’t need the `ux:Name="chk"` you can just use `this` when targeting the `checkmark` panel

---

<div class="post-metadata">

**Author:** ![Maksymilian](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/maksymilian/32/111_2.png) [@Maksymilian](https://forums.fusetools.com/u/Maksymilian)\
**Post date:** [April 4, 2016, 7:58pm UTC](https://forums.fusetools.com/t/creating-a-custom-checkbox-control-using-whiletrue-while-false-and-binding-to-an-observable/3074/3 "2016-04-04T19:58:17Z")

</div>

Awesome, thank you! That’s exactly the ingredient I’ve been missing:

```auto
<WhileFalse Value="{Property chk.Value}">.....<WhileFalse>

```

The docs ([https://www.fusetools.com/learn/fuse#keyword-whiletrue](https://www.fusetools.com/learn/fuse#keyword-whiletrue)) aren’t clear about how to bind `WhileTrue` to a property.

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [April 4, 2016, 10:08pm UTC](https://forums.fusetools.com/t/creating-a-custom-checkbox-control-using-whiletrue-while-false-and-binding-to-an-observable/3074/4 "2016-04-04T22:08:35Z")

</div>

That’s because its not only tied to `WhileTrue` its for anything: [https://www.fusetools.com/learn/fuse#ux-property](https://www.fusetools.com/learn/fuse#ux-property)

---

<div class="post-metadata">

**Author:** ![Fernando\_Lins](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/fernando_lins/32/597_2.png) [@Fernando\_Lins](https://forums.fusetools.com/u/Fernando_Lins)\
**Post date:** [April 4, 2016, 10:24pm UTC](https://forums.fusetools.com/t/creating-a-custom-checkbox-control-using-whiletrue-while-false-and-binding-to-an-observable/3074/5 "2016-04-04T22:24:35Z")

</div>

@Maksymilian You might want to try using `<ToggleControl />` instead of `<Panel />` for this, it already covers the boolean `Value` property then you can just do `<WhileTrue>` and `<WhileFalse>` binding only the property when you declare it.

---

<div class="post-metadata">

**Author:** ![Maksymilian](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/maksymilian/32/111_2.png) [@Maksymilian](https://forums.fusetools.com/u/Maksymilian)\
**Post date:** [April 5, 2016, 12:46pm UTC](https://forums.fusetools.com/t/creating-a-custom-checkbox-control-using-whiletrue-while-false-and-binding-to-an-observable/3074/6 "2016-04-05T12:46:44Z")

</div>

@Edwin, but it’s not `WhileTrue` has a `Value` property @Fernando, yeah that’s a good approach.