Create a Checkbox

Question

Write a program that creates a two-state checkbox that people can interact with using a mouse.

Specifically, your program should achieve all of the following:

1. Have a 8×8 pixel (or larger if desired) region of the screen that is the clickable area of the checkbox. Henceforth this region is simply called the checkbox.

2. When the mouse cursor is moved within the checkbox and the default* mouse button is pressed, the checkbox should toggle states.
   Checked becomes unchecked. Unchecked becomes checked.

3. The checkbox should not move when it is toggled.

4. In the checked state, the checkbox may be any colors.

5. In the unchecked state, the checkbox may be any colors as long as at least 16 pixels are visually distinct from the checked state.

6. In a single program instance, all checked states should be visually identical to one another and all unchecked states should be visually identical to one another.

7. Don't end the program until it's explicitly terminated (e.g. via exit button or Alt+F4), so a user can click the checkbox as much as they want.

^{*You may assume the default mouse button is always left click, but it's also fine to use the default as defined by mouse software or the OS, which may not actually be left click depending on the user.}

Notes

• It does not matter what is outside of your checkbox region. It could just be the desktop. It could be a portion of a console that changes on every toggle.

• It does not matter what state your checkbox starts in.

• The checkbox region may have any dimensions at or above 8×8 pixels. It need not be square.

• You may make minor allowances for settings that are out of your control such as console font size, browser zoom, monitor resolution, etc. As long your program works in a reasonable test setting it should be valid.

• If your program opens a window, you may assume it has been dragged to an appropriate location on the screen if necessary (e.g. top left corner).

• You may use markup languages such as HTML or other languages we usually don't consider as full-fledged programming languages.

• Your checkbox must be be toggleable using the default mouse button. It's alright if it also toggles for other forms of input (e.g. right mouse button), with the exception of mouse motion. i.e. the state should not change if the mouse is merely moved within the checkbox.

• Screenshots of your checkbox in action are highly encouraged!

Scoring

The shortest code in bytes wins.

Example

A canonical HTML example in 23 bytes.

<input type="checkbox">

For me in Google Chrome, this makes a 12×12 pixel checkbox and about 30 pixels clearly change between checked and unchecked states.

I make the allowance that browser zoom is at 100%.

Answer 1

Mathematica, 10 bytes

Checkbox[]

Assumes Mathematica's notebook environment.

The two states look like this:

Answer 2

HTML, 20 bytes

Don't know how valid this will be as an answer. HTML requires the tag to be closed to legally validate, but modern browsers will automatically close them so it's executable.

<input type=checkbox

Answer 3

Bash, 67 55 50 35 32 31 bytes

:()(read -p$[i^=1]
›?9h -sn6
:)

The code contains a CR byte (first newline) and a CSI byte (small right angle bracket with the Windows-1252 encoding). It requires xterm (or equivalent) and the ISO-8859-1 encoding (or similar).

The code defines a function named :, which alternately displays a white 1 or 0 in a black rectangle. There are exactly 24 differing pixels with xterm's default settings. (proof)

For an older version that toggles the color of the entire terminal, check revision 10 of this answer.

Thanks to @ais523 for suggesting xterm, which saves 4 bytes!

How it works

:(...) creates a function named : that executes ....

The read command does the actual magic.

• -p specifies an input prompt, which is printed to STDOUT.

  • $[i^=1] is an arithmetic expansion which XORs the variable i with 1. i may initially be unset; when this occurs, it will be treated as 0.

  • The carriage return places the cursor back at the beginning of the line.

  • ›?9h captures the mouse in supported terminals. Each click will send six characters to the terminal, namely ←[Mbxy, where ← represents the ESC byte (0x1b). ←[ indicates an escape sequence, M the mouse, b the button (0x20 + the button number), x the x coordinate of the click (0x20 + coordinate), and y the y coordinate.

  • -sn6 makes read silent (the mouse input won't be echoed to STDERR) and stops after reading exactly 6 bytes. It saves the input in the REPLY variable, but we're not interested in the output it produces.

Finally, once read finishes (after exactly one mouse click), : recursively calls itself, entering an infinite loop.

Creation and invocation

$ echo $':()(read -p$[i^=1]\r\x9b?9h -sn6\n:);:' > checkbox.sh
$ xxd -c 17 -g 1 checkbox.sh
0000000: 3a 28 29 28 72 65 61 64 20 2d 70 24 5b 69 5e 3d 31  :()(read -p$[i^=1
0000011: 5d 0d 9b 3f 39 68 20 2d 73 6e 36 0a 3a 29 3b 3a 0a  ]..?9h -sn6.:);:.
$ LANG=en_US xterm -e bash checkbox.sh

Output

Answer 4

GitHub Flavored Markdown - 6 bytes

- [ ] 

(There is a trailing space)

In a gist :

Answer 5

HTML + JavaScript, 32 30 25 chars

<p onclick=innerHTML^=1>0

Answer 6

Processing, 78 66 65 63 61 bytes

2 bytes saved thanks to @TuukkaX by using -a%2 instead of a%2*-1

2 bytes saved thanks to @TuukkaX by using a=-a

int a=1;void draw(){background(a);}void mousePressed(){a=-a;}

The checkbox alternates between being black and white.

Explanation

int a=1;                   //the variable that contains the state of the checkbox
void mousePressed(){a=-a;} //if the mouse is pressed, change the sign of a

Now there are many other alternatives like using an if-statement to process this, but then it gets weird and constantly changes the background while the mouse is being pressed. I first tried mouseButton, but then I would need more conditions and more code that will just end up much more verbose.

Now for mousePressed() to be called forever (otherwise it would just stop after the program has just started), we need a draw() function.

void draw(){               //loop infinitely
  background(a);           //set the sketch's background to -a%2
  //if a ==  1, the background colour is set to almost black
  //if a == -1, the background colour is set to white
}

---

A smaller checkbox would be 90 bytes (the checkbox is in the top left corner, so we can remove some mouse conditions):

int a=1;void draw(){fill(a);rect(0,0,8,8);}void mousePressed(){if(mouseX<9&mouseY<9)a=-1;}

Answer 7

Unix Shell (+x11-apps), 3 bytes

Disclaimer

The answer below is boring, borderline and "feels cheating" (at least to me).

Yet, it does not seem to violate any of the challenge rules "as written", or "default loopholes", so I'm posting it.

(If you can point a specific rule it breaks, please comment on !)

Golfed

xgc

The xgc program demonstrates various features of the X graphics primitives.

The xgc screen is actually filled with various checkboxes:

and "sticky buttons" (which qualify as checkboxes, under this challenge rules):

Answer 8

AHK, 25 bytes

Gui,Add,Checkbox
Gui,Show

Output -

Answer 9

Scratch, 2 blocks

Put this script in the default sprite (which comes with 2 costumes)

Answer 10

Python REPL, 45 bytes

from tkinter import*
Checkbutton(Tk()).pack()

Answer 11

GeoGebra, 10 bytes

Checkbox[]

Entered into the input bar.

Here is a gif of the execution:

Answer 12

Tcl/Tk, 21 byte

Golfed

grid [checkbutton .c]

Answer 13

HTML with JavaScript - 136 124 120 115 113 111 109 79 bytes

<p style=height:20;border:solid onClick=t=this;t.innerHTML=(t.e=!t.e)?'x':''>

-2 with thanks to @KritixiLithos

Reduced to 79 after some fantastic golfing from @Jan. Although the new version fits the requirements I have kept the old version for professional pride reasons.

While it is perfectly valid to use built-ins, I thought it was more fun to create my own from scratch. Tested with Chrome and Firefox. border:solid is there for IE compatibility but I don't know if it is actually needed in newer IE versions - I don't have IE available to test.

The px in the height is there for the benefit of "Run code snippet" so is not included in the "real" byte count. It works fine in the browser without it.

<p style=height:20px;border:solid onClick=t=this;t.innerHTML=(t.e=!t.e)?'x':''>

Previous version:

<p id=d style="width:20px;height:20px;border:solid 1px"onClick="d.innerHTML=d.innerHTML=='x'?'':'x'"align=center>

Answer 14

Minecraft 1.0.0, 1 byte

A lever in Minecraft meets all the criteria for a check box. This answer is only valid for older versions of the game where punching a lever still toggles it.

Scored using @Connor O'Brien's suggested byte count.

Answer 15

Any version of Windows command line, 3 bytes

(cmd.exe, batch, powershell, start->run, whatever)

osk

Opens the on-screen-keyboard which has several "checkboxes" such as shift, ctrl, alt, capslock keys Similar to the xgc answer, and inspired by the SmileBASIC answer screenshot.

Answer 16

TI-Basic, 15 bytes

While 1:Shade(0,9:Input :ClrDraw:Input :End

Fairly straightforward. The checkbox covers approximately 40% of the screen and alternates between black and white. When checked, the screen will look something like this:

Answer 17

Octave, 36 20 bytes

uicontrol('sty','c')

Thanks to @LuisMendo saved 16 bytes!

Answer 18

KV Lang, 8 bytes

CheckBox

---

assuming a really basic Python environment for kv lang to even run:

from kivy.app import runTouchApp
from kivy.lang import Builder
runTouchApp(Builder.load_string('CheckBox'))

This works basically because CheckBox is a Kivy widget included in a kivy.Factory as each widget from the standard library.

That simple string creates an instance of CheckBox and because of runTouchApp expecting a widget to run I can use Builder.load_string.

The background of load_string handles basically every kv string and if there is a single instance of a widget defined (e.g. CheckBox), then it is elevated to a root widget position, for example:

Application
    openGL Window
        root widget(mostly layout)
            main tree
            and some widgets
            ...

Answer 19

SmileBASIC, 49 bytes

@L
O=T
TOUCH OUT T,,
X=T<O!=X
KEY 1,""[X]GOTO@L

 and  are an empty box and a checked box in SB's font.
Toggle the checkbox by touching the screen (the closest thing to clicking with a mouse)

Cheating answers:

0 bytes:

(the on-screen keyboard has buttons that act like checkboxes, such as the caps lock and insert keys)

14 bytes:

EXEC"SYS/SBGED

Opens up the built in graphics editor, which has multiple checkbox-like buttons

Answer 20

C#, 124 120 bytes

saved 4 bytes thanks to grabthefish.

note: because of edits, the picture doesn't exactly represent what the code makes, the "checkBox1" isn't displayed with the current code.

using System.Windows.Forms;class P{static void Main(){var a=new Form();a.Controls.Add(new CheckBox());a.ShowDialog();}}

ungolfed: using System.Windows.Forms; class P{ static void Main(){ var a=new Form(); a.Controls.Add(new CheckBox()); Application.Run(a); a.ShowDialog(); } }

Answer 21

Excel VBA, _{38 32 31} 29 Bytes

Immediates Window function that inserts a checkbox of height=9 and width=9, at the cell A1 on the first sheet of the active Excel VBA project

Sheet1.CheckBoxes.Add 0,0,9,9

-6 Thanks to pajonk for replacing [A1],[A1],9,9 with 0,0,9,9

-1 for replacing Sheets(1) with [Sheet1]

-2 for realizing the above was stupid and using Sheet1 instead

Answer 22

Ruby with Shoes, 16 characters

Shoes.app{check}

Sample output:

Answer 23

HTML with JavaScript, 46 33 28 bytes

<body onclick=innerHTML^=1>0

v2

<body onclick=this.innerHTML^=1>0

v1

<body onclick=t=this;t.innerHTML=t.e=!t.e||''>

This is a variant on @ElPedro's answer: Create a Checkbox . Got down to 28 bytes with the help of @Albert Renshaw It could be further reduced, but that would make it identical to Create a Checkbox

The whole application area is clickable. It will display 0 in the off state and 1 in the on state. Try it out at https://jsbin.com/nuhetiyocu/1/edit

Answer 24

Powershell v5+, 94 Bytes

($a=[Windows.Forms.Form]::new()).Controls.Add([Windows.Forms.Checkbox]::new());$a.ShowDialog()

This is pretty terrible, but I can't get the statements any shorter with either Add-Type or using namespace - and the variable is required, since I need to reuse the object to show the form, and Controls.Add() returns nothing usable.

ShowDialog is required on my system to have the box be interactive after running this command, otherwise the form is frozen.

also System.Windows.Forms.Form can only be shortened to Windows.Forms.Form before (at least my own) system stops auto completing it in a fresh session.

Answer 25

Operation Flashpoint scripting language, 273 bytes

To show the checkbox:

createDialog"b"

But first it must be defined:

Save the following to a file named description.ext in the mission folder:

class b{idd=999;movingEnable=1;class controls{class c{idc=457;x=0.1;y=0.1;w=0.1;h=0.1;text="";action="if(ctrlText 457=={})then{ctrlSetText[457,{V}]}else{ctrlSetText[457,{}]}";type=1;style=2;colorText[]={1,1,1,1};font="tahomaB36";sizeEx=0.1;}}}

The checkbox in action:

Answer 26

VBA (Word), 74 57 bytes

-17 thanks to Taylor Scott

Sub a()
f = a.FormFields.Add(Selection.Range, 71)
End Sub

Filename of the document should be a.

Answer 27

Pug, 20 bytes

input(type=checkbox)

Answer 28

Clojure, 201 195 145 127 bytes

(ns c(:require[quil.core :as q]))(def a(atom nil))(q/defsketch b :draw #(q/background(if@a 0 99)):mouse-clicked #(swap! a not))

-6 bytes by getting rid of the need for m/fun-mode.

-50 bytes by removing the :setup and :size options, since they are defaultable and unnecessary in non-fun-mode. Also removed the unnecessary import for middleware.

-18 bytes thanks to @ASCII-only. Changed to "smaller" colors, and removed an unnecessary space before the dereference operator (@).

Creates a Quil sketch (a Clojure library that provides a layer over Processing), therefore, this requires the Quil library to run.

(ns bits.golf.checkbox
  (:require [quil.core :as q]))

; Mutable global variable to hold the toggle state
(def a (atom nil))

(q/defsketch b
         ; Draw the background color to be either black or red depending on the toggle state.
         :draw #(apply q/background (if @a [0 0 0] [255 0 0]))

         ; Negate the state on mouse click
         :mouse-clicked #(swap! a not))

Answer 29

AutoIt, 78 Bytes

GUICreate(0)
GUISetState(GUICtrlCreateCheckbox(0,0,0))
Do
Until GUIGetMsg()=-3

Opens a maximized window that can be closed like any other windows window. The maximization and ... on-top-ness is a side effect of the golfing.

Answer 30

Python, 62 bytes

from tkinter import*
a=Tk()
Checkbutton(a).pack()
a.mainloop()