(please select a color)

<a href="apple.com/homepod-mini/[color]">Purchase</a>

Group select

This input type can display an unlimited number of custom options. Each option supports text, images, or any other stacks content. The shortcode output for each option is defined individually. Only one option may be selected at a time.

Configure includes a special element stack that supports shortcodes in its style options and its attributes. This example uses the color input shortcode in the background color option and the pattern input shortcode for the image URL.

This examples uses:
2 Group Select Input stacks
A Configure Element stack

Group select multi option

This input type can display an unlimited number of custom options. Each option supports text, images, or any other stacks content. The shortcode output for each option is defined individually. Multiple options may be selected at a time.

In this example each of the selected options outputs a value that is used to calculate a total. That total is then formatted through the included options to display as currency with decimal places visible.

Shortcodes that output numerical values will display an animation when the input is changed.

This examples uses:
A Group Select Input stack
Math to get the sum of the selected options plus the base value (13.99)

Number

This input accepts numerical values. The maximum and minimum value may be defined as well as the starting default value. The shortcode output will mirror the value of the input.

In this example, the input value is stored in a shortcode that is used in a simple math calculation multiplying by a million. That value is then used to display the total.

This examples uses:
A Number Input stack
Math to convert the value into millions

Number custom increment

Number inputs include stepper arrow buttons that are used to increase and decrease the value. The step at which the value increases or decreases can be customized.

In this example, the stepper arrows increase and decrease the values by 0.25. The shortcode output is used to modify the green element's styles as a visual representation. They are also used to calculate the area displayed below the element.

This examples uses:
2 Number Input stacks
A Configure Element stack
Math to convert the width and height to percentages (used to modify the width and height of the element)

Slider

This input accepts a range of numerical values. The maximum and minimum value must be defined as well as a starting default value. The shortcode output will mirror the value of the input.

In this example, the slider shortcode is used in the element styles to control the opacity.

This examples uses:
A Slider Input stack
A Configure Element stack

Slider with ticks

For sliders with smaller ranges, tick indicators will automatically display at set intervals that match the available values.

Select

This input type can display an unlimited number of custom options. The options are contained in a traditional dropdown list. The shortcode output for each option is defined individually. Only one option may be selected at a time.

In this example, the first select field is used to conditionally display a second select field. Both shortcodes are used inside of an external input field (Super Forms 2).

This examples uses:
2 Select Input stacks
2 Condition stacks (used to display corresponding processor select inputs)
*Super Forms 2 stack (sold seperately)

Checkbox

This input accepts a true or false value. The shortcode true and false output can be defined as a numerical values or as text.

In this example, a disabled button is conditionally displayed until the checkbox is enabled. When the checkbox is enabled a clickable button will be displayed instead.

This examples uses:
A Checkbox Input stack
2 Condition stacks (used to display link buttons)