Skip to content
Jux Docs
WelcomeDesignersDevelopers

Checkbox Field

Checkbox field thumbnail placed in the elements panel in Jux UI
Checkbox field thumbnail placed in the elements panel in Jux UI. Click or drag to the canvas to create a local component.

Technical definition

<input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated. A checkbox allows you to select single values for submission in a form (or not).

Anatomy and styling

The checkbox element consists of 2 main parts. An instance of the checkbox element and a logical slot named ‘trigger’, that holds a text wrapper div with a label and a helper text.

Checkbox field object navigator showing component structure

Props and states

  1. Interactive state:
    1. Default
    2. Hover
    3. Active
  2. Disabled property
    1. true
    2. false
  3. Checked state (special, linked to the instance of ‘checkbox’):
    1. checked
    2. unchecked
    3. indeterminate

Matrix

Checkbox field component matrix showing different states and properties
Matrix view showing all possible combinations of checkbox states and properties

Special mechanics

  1. Checkbox instance and the Checkbox field are mirrored in the disabled and checked properties. This means that the state of the property checked (values can be checked, unchecked or indeterminate) is always the same both in the instance of the checkbox and the checkbox field component.
  2. Trigger (hit area) - is a container that can control the interactive state and checked state of the checkbox instance. It can be empty or it can have other objects in it. For example if the label and a helper text are inside the trigger - hovering them will cause the checkbox instance to be in it’s hover state and clicking on either of them will alter the checked state of the checkbox instance. Use this ability to have fine grained control over which elements do affect the checkbox and which don’t.

Live mode

In live mode you can:

  1. Check the interactive states of the checkbox.
  2. Change the state of the checkbox by clicking either on the checkbox instance or on whatever is in the ‘trigger’ logical slot. Note that in a single checkbox the indeterminate state cannot be caused by checking or unchecking the checkbox, it’s only relevant where nested checkbox groups are involved or if indeterminate is the default state of the checkbox in a field (not possible in Jux but is possible by the dev in code.