Skip to main content

Search

step

  • Updated

The step tag can be applied to numeric text questions to display buttons respondents can click to increase or decrease their response by a set amount (or "step"). Responses may also be typed into the text field.

Try it!

Details

  • The step tag can be included with both number and integer questions and tables.
  • The step value (amount of increase/decrease) can be either a whole number or decimal. For decimal steps, use type: number. 
  • The layout tag can be included to adjust the button positioning relative to the text fields. The 'split' and 'split-reverse' layouts are recommended for surveys that will be translated to right-to-left (RTL) languages, such as Arabic or Hebrew.
  • The mode: tiled tag can be included with tables that use the step tag.

Commonly used tags

The following tags are commonly used with the step tag.

Tag Description
datatype

Defines the type of input accepted for a response.

Frequently used datatypes include: 'number', 'whole', 'integer', and 'decimals'.

instructions

(alias instruct)

 Provides instructional text to guide the respondent.
layout

Specifies the location of the buttons used to increase/decrease the respondent's input. Options include:

  • split — Default layout; displays buttons on either side of the input field, starting with minus relative to direction of language. [-]____[+] for English, [+]____[-] for right-to-left (RTL) languages.
  • split-reverse — Displays buttons on either side of the input field, starting with plus relative to direction of language. [+]____[-] for English, [-]____[+] for RTL languages.
  • minus-plus — Displays buttons on either side of the input field, always placing minus on the left, plus on the right, regardless of language. [-]____[+].
  • plus-minus — Displays buttons on either side of the input field, always placing plus on the left, minus on the right, regardless of language. [+]____[-].
  • left — Displays buttons on the left side of the input field, one above the other (plus on top) [±]____.
  • right — Displays buttons on the right side of the input field, one above the other (plus on top) ____[±].
max Specifies the maximum accepted value for a response.
min Specifies the minimum accepted value for a response.
postfix Specifies text to be displayed after the text field.
prefix Specifies text to be applied before the text field.
range Defines and validates a numeric range. Can be used in place of the min and max tags.

showcolumntotal

(alias sct)

 Used with tables; adds a "Total" field at the bottom of the table which keeps a running total of the column's sum.
size Defines the size (width) of the text field in ems. This tag can be applied to any text question type to override the system defaults.

Customizing buttons with CSS

The buttons used to increase and decrease inputs can be customized with CSS. For a list of available button icons, see Available step icons below.

Available step icons

There are several icons available for use with the step tag in an icomoon collection. This collection will be updated periodically. You can contact Support if additional icons are needed.

See below for our current available icons.

Additional examples

Specifying button layout

The layout tag may be applied to alter the default display location for the step buttons. A few examples of the available layouts are shown below.

Using decimal steps

It is possible to use decimal steps in questions as shown in the following example. The 'decimals 2-3' datatype ensures that respondents cannot manually input answers longer than 3 decimal places. Note that when a decimal may end in '0' (e.g., .030), the system will automatically drop the final '0' when using the input buttons.

Tip! When using the step tag with decimals, it is a good idea to check and make sure the text field is large enough to display the full length of the decimal; if not, add the size tag to adjust as needed.

 

Summing column totals

Numeric input tables that require values in a column to be totaled, sometimes known as SCT tables or "sum-to-100" tables, can use the step tag in concert with showcolumntotal: y. The following example allows respondents to either type in percentages for each expense or use the step buttons to increase and decrease their responses.

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.