How to create a checkbox with Hype?

1

Hi there,

I’m currently working on a website. On my site I would like to ad checkboxes that you can check and uncheck as you please. I tried a few things but nothing works. Do you guys maybe have an idea on how to do it?

Thanks in advance.

2

Here sone example.

You use a rectangle and add the form to it’s innerHTML.

I have add some JS to get the results.

Checkboxexample.hypetemplate.zip (17.5 KB)

–Update: commented the JS

2 Likes
3

hehe :wink:

You can also (if you are creative enough) design a checkbox within hype by combining a rectangle and a Tick image / font character and animate it using timelines and then add javascript to obtain some kind of activity. However, Mark's way above is bar far the easier route :smile:

tickUntick.hype.zip (51.8 KB)

1 Like
4

You can modify the innerHTML to include the labels as actual label elements so that clicking on them also toggles the associated checkbox input (a much bigger target to hit):

<form action="">
<input class="vehicle" type="checkbox" id="vehicle1" value="Bike"><label for="vehicle1">I have a bike</label><br>
<input class="vehicle" type="checkbox" id="vehicle2" value="Car"><label for="vehicle2">I have a car</label>
</form>

Note, this requires using unique IDs for the inputs but since the JS uses the class type to find the elements, the JS itself does not need to be updated.

2 Likes
5

Hi there, is there a way to change the size of the checkbox?? Currently the checkbox is quite small in the samples.
I know this is probably a newbie question. Thanks in advance.

6

@johnxarc

Hi John!

Here is a Hype project demo (based on @MarkHunte’s example above):
LargerCheckBox.hype.zip (17.0 KB)

You’ll find this CSS in the Head of the Hype doc:

<style>
	input[type=checkbox]
	{
 	 -ms-transform: scale(1.5); /* IE */
 	 transform: scale(1.5);
 	 margin-left: 5px;
 	 margin-bottom: 20px;
	}

	.checkboxtext
	{
  	margin-left: 30px;
  	margin-top: -32px;
	} 
</style>

You scale the checkbox size by adjusting the number in the "transform: scale(1.5);" line (and the line for the Internet Explorer browser just above it).
In order to provide control over adjusting the baseline of the text due to increasing/decreasing the size of the checkbox, there is a _div class="checkboxtext"_ in the "form" tag which allows for this baseline adjustment. You will need to change the CSS "margin-top" value in ".checkboxtext" if You adjust the checkbox size and want to keep the same baseline relationship with the corresponding text. 
<form action="">
<input class="vehicle" type="checkbox" name="vehicle" value="Bike"><div class="checkboxtext">I have a bike</div><br>
<input class="vehicle" type="checkbox" name="vehicle" value="Car"><div class="checkboxtext">I have a car</div> 
</form>
7

Hi Jim,

Thanks so much, really do appreciate that. Really clear and concise explanation and sample (you should write a book).

I’m really just getting into using Hype for hi fi prototypes so I’ll probably have lots of questions like this for a while.

2 Likes