Checkbox - Create custom checkboxes: Sizes, borders, HTML text, text position, colors, checkbox shape, icons

Checkbox
Create custom checkboxes:
Sizes, borders, HTML text, text position, colors, checkbox shape, icons.

GIF_20250327_054901_669

GIF_20250327_055118_757

GIF_20250327_055336_687


CreateCheckbox

Create a customizable checkbox with an icon like Check Style or the 3 default symbols.

To display icons instead of the default verification icons: Check, Cross, and HorizontalLine.
Upload the .png icons to assets and set verificationStyle = Icon and addIcon = true.


SetVerificationColor

Changes the color of the check mark in the CheckBox.


ChangeText

Changes the text of a checkbox, supporting HTML formatting.


ChangeTextColor

Changes the color of the text in a checkbox.


Visibility

Sets the visibility of a checkbox.

blocks - 2025-03-27T052842.130


GetCheckboxState

Get the state of a checkbox.


SetCheckboxState

Sets the state of a checkbox.


TextSizeAndStyle

Set the size and style of the checkbox text.


CheckboxSize

Set the size of the checkbox.


VerificationStyle

Set the check style of the checkbox.


CheckboxChecked

Fires when the state of the checkbox changes.


Update v1.0 Mar 29, 2025.

I've changed a lot of things, corrected them, and added others. The CheckboxU extension won't be updated, I've changed its name, but the checkbox functionality is still there in this new version.

  • Changes were made to function and parameter names.
  • Helper blocks were added: VerificationStyles, TextStyles, and TextPosition.
  • Previously, only hexadecimal colors were used; now colors from built-in AI2 blocks can also be used.
  • A function was added to change the color of the Checkbox.
  • A function was added to add an icon from assets as a verification.
  • Text input now accepts HTML and text positions: right, left, top, bottom.
  • Circular checkboxes can now be created with the isCircular = true parameter.
  • Checkboxes can be aligned based on the Arrangement alignment.
  • The event now also receives the checkbox text.
  • Removed these unnecessary check styles: Circle, Triangle, Rounded, Rectangle, and Star.

aiaProject:
Checkbox.aia (93.2 KB)

Extension v1.0
joejsanz.joedevcheckbox.aix (18.7 KB)


JDK: 11
Minimum API Level: 21
Updated On: 2025-03-29T07:00:00Z

Built using: FAST-CLI v2.8.1


Thanks.

7 Likes

What type of component is the "parent" ?

I used HorizontalArrangement, I have not tested it with any other component, I will do more tests later

Updated extension

Hi, I am new to App Inventor and I think I don't understand yet how to use this extension. I've installed it, but I don't get the call block above, but a slightly different one (no drop down list for CheckboxU1, just call CheckboxUCreateCheckBox, and an extra notch for Component which I don't know what block to fill with). And where should this call block go? Thank you!

EDIT: OK, I figured it out, Component should be filled with CheckboxU1, now to figure out the second part of the question, where does the entire call block go to create a custom checkbox.

Show me what you have done or send me your aia to verify it.

1 Like

Hi and thank you for the quick reply! I restarted and I got the call block to look exactly as above, but I still haven't managed to use it properly, sorry. I will send you a message with the .aia now, thank you again!

1 Like
  • Matanga says the Changa :rofl: :rofl: :rofl: :rofl: (even more funny)

Thanx for your work, i'll tested.

1 Like

Thank you.

In parent you will need to put a HorizontalArrangement.

Later I will change the block so that there is no confusion in that parameter.

1 Like

Now I'm testing it with dynamic components, as if it were a Badge (Favorite, Like, Etc.)

  • It would be good if you kept it in mind for an upcoming update. Well, it would be a great feature. :wink:

In fact, it has unlimited potential.

Are you referring to something similar to Facebook reactions?

1 Like

Yes, but imagine expand it to dynamics forms creation, social or product or customer surveys, etc.

Because sometimes you need information about feelings and how it made you feel because 0 to 100%, 0 to 10, True or False, etc. It does not return the necessary information.

That's why there's a lot of difference in how something or someone makes you feel, sense, and what you think and thought about it, etc.

Many times the reactions to something or someone are varied, including "weird".

  • all that emotions, feelings, thoughts, and reactions can be measured by True, False, even the Null ones gives you information about.

Memerize information:

:ok_hand: = it's ok
:pinched_fingers: = Whaaaaaaat....!!!
:+1: = i like it
:-1: = Dont like it
:nail_care: = I'm not interested, it's even worth my time, try something else.
:eyes: = WaTaFuuuuu!!!!!????...
:angry: = Angry
:rage: = Rage
:face_with_symbols_over_mouth: = Insult
:exploding_head: = Ooooohhh... wooooo!!!! Blow my mind!!!!
:astonished: = Astonished, I dont want it... i need it!!!!
:hushed: = Amazing! i want more
:open_mouth: = Amazing.

And now... What if?? every reaction it's stored (True, False, even Nulls) and take it by an a LLM like GPT, and resume reactions from 0<X.xx <100 about your actual/next product.

And balance Decisions, projects, etc. on that resumes?

1 Like

See! Sometimes it's not about seeing "the product" itself, but beyond!

  • That's what I saw in your extension.

:grimacing:

1 Like

This is interesting, I'll investigate more about it and see what I can do.

1 Like

Update v1.0 Mar 29, 2025.