CHECKBOX WIDGETS

MORE RESOURCES

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

MOST COMMON USE

FORM OPTIONS

In a form, a checkbox gives the user a binary choice. A checkbox can be used for a single choice, like "Subscribe to Emails?", or in a situation where there are many possible choices, like choosing from many pizza toppings on an order form.

EDITING

ADDING TEXT

Double-click a checkbox widget to edit its text. (Double-clicking gives you access to the most common editing function for each widget type.) If you want to add new text to a checkbox widget, you can just begin typing while the widget is selected.

LOCATION AND SIZE

To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.


When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. Widgets can also be resized to a specific pixel value. Use the “w” and field in the top toolbar or in the Inspector’s Style tab to set the checkbox’s width in pixels. The height of a checkbox widget is set automatically according to the height of its contents.

STYLING

Editable properties of a checkbox widget's formatting include text size, font, font family, and color. These properties can be controlled from both the Style tab of the Inspector and in the Style Toolbar at the top of the interface.


The checkbox portion of a checkbox widget is a fixed height and width. You can edit the label text, including changing its text color and size. It isn't possible to change the style, size, or shape of the box portion—web browsers reserve control over styling of this portion. (If a custom appearance is required, you can make a custom checkbox using shape and label widgets.)

ALIGNMENT

By default, the checkbox is on the left and the associated text is on the right. You can swap the order so that the text is on the left and the checkbox is on the right. In the Properties tab, use the "Align button" radio buttons. Choose between "Left" and "Right" alignment options.

INTERACTIVITY

FILLING AND CLEARING A CHECKBOX

A checkbox can start in its selected state. To set a checkbox to its selected state, click the box on the canvas or click the "Selected" option in the Properties tab.


Checkboxes can be toggled in the HTML output as well. The user can click the checkbox to select and unselect it.


You can also dynamically set a checkbox to selected. Use the action "Set Selected/Checked" with the selected value set to "true".

DYNAMICALLY SETTING TEXT ON A CHECKBOX

Use the action "Set Text" to change the text on a checkbox widget with an interaction.

LIMITATIONS AND WORKAROUNDS

Some checkboxes have a third, "indeterminate" state in which they are neither selected nor unselected. If you need a checkbox that can have three states, make a custom checkbox using shape and label widgets.