Preselected option {…}-

Options are form features that consist of pre-formulated phrases and associated form fields to select one or more options. The form fields are either checkboxes or, in the case of mutually exclusive options, so-called radio buttons.

Options are typically not selected by default. But you can preselect options in those cases where it is useful.

Do not preselect options which cause extra costs to customers or by which readers agree to render some of their rights. Necessary agreement should always be an informed and active process and not taken for granted by default.

How to

Mark a preselected option with curly brackets followed by a hyphen {…}- at the beginning of a new line. Type a space and the option’s text next.

Like any regular option, a preselected option can have a key between its curly brackets { and } as in the examples below. This key is not displayed publicly, but it can be processed programmatically when the form is submitted. The key identifies a selected option then.

Mind that you can only have one option preselected inside a block with mutually exclusive options like in the second example.

Examples

Customers can choose pizza toppings in the first example. A few options are typical for pizza and are included in the basic pizza price. These are preselected. Customers can still opt out of them, for example due to an allergy.

Please choose your pizza toppings:
{🍅}- tomato sauce
{🧀}- cheese
{🌶️} hot pepper
{🍄} mushrooms

The second example is from a shirt order form. One of three mutually exclusive color options is preselected, because the shirt can not be without a color. It makes sense to preselect the option that is displayed in a product photo on the webpage initially:

Which background color should your wolf-shirt have?
{black}- the color of the night
{blue}' the color of the sea
{green}' the color of the forest

For developers

When Aneamal is translated to HTML, a pre-selected option is turned into an input element with a checked attribute. The element’s type is radio, if there are mutually exclusive options in the same block, and otherwise checkbox. The value attribute contains the option’s key. The input is followed by a label element that contains the option’s text. Options are separated by br elements. So the pre-selected options in the first example become:

<input id='_1' name='_1' form='_f1' type='checkbox' value='🍅' checked> <label for='_1'>tomato sauce</label><br>
<input id='_2' name='_2' form='_f1' type='checkbox' value='🧀' checked> <label for='_2'>cheese</label><br>

The second example becomes:

<input id='_5' name='_1' form='_f2' type='radio' value='black' checked> <label for='_5'>the color of the night</label>

All options from the same block get wrapped in an HTML fieldset element.