Exclusive option {…}'

Options are form features that consist of pre-formulated phrases with associated form fields to select an option. In case of exclusive options, these form fields are usually called radio buttons.

A radio button is similar to a checkbox. The difference from regular checkboxes is that choosing one radio button automatically deselects all other radio buttons from the same set of options. Hence only one of several options can be chosen: they are mutually exclusive.

Use cases for exclusive options include polls, multiple-choice tests and selecting a shoe size. They are also useful for ratings, for example for rating a product with one, two, three, four or five stars.

How to

Mark each of the exclusive options with curly brackets at the beginning of a new line followed by an apostrophe {…}' followed by a space and the option’s text. Such options within the same block – that is without blank line in between them – are mutually exclusive.

Each 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.

You can write a question or task directly in the line above the mutually exclusive options like in the second and third example.

Examples

Here is a simple example with two mutually exclusive options. You can try and see how a click on one option deselects the other option, if that had been selected earlier.

{danger}' Go chasing waterfalls!
{safety}' Stick to the rivers and lakes that you’re used to!

The second example shows a multiple-choice item as it could appear in a math test. The options are preceded by a question, also called stem in multiple-choice tests.

What is the square root of two?
{a}' ½
{b}' 1
{c}' 1.41421356…
{d}' 1.41592653…

The third example demonstrates that exclusive options can be used to rate stuff.

Please rate the task to rate this task:
{bad}' ☹️
{neutral}' 😐
{good}' 😊

The exact presentation of the options on the webpage is a design choice. For instance, the above Aneamal block could also be given a different look such as:

For developers

When Aneamal is translated to HTML, an exclusive options block is turned into an HTML fieldset element. Inside it will be an input element for each option. The element’s type is radio and its value attribute contains the option’s key. The input is followed by a label element that contains the option’s text. The options are separated by br elements. So the first example becomes:

<fieldset>
<input id='_1' name='_1' form='_f1' type='radio' value='danger'> <label for='_1'>Go chasing waterfalls!</label><br>
<input id='_2' name='_1' form='_f1' type='radio' value='safety'> <label for='_2'>Stick to the rivers and lakes that you’re used to!</label>
</fieldset>

Mind that the values of the HTML attributes id, name, form and for vary depending on where the options block occurs in the webpage.

If the options are directly preceded by a question, the question is turned into a HTML legend element when Aneamal is translated to HTML. So the second and third examples become:

<fieldset>
<legend>What is the square root of two?</legend>
<input id='_3' name='_1' form='_f2' type='radio' value='a'> <label for='_3'>½</label><br>
<input id='_4' name='_1' form='_f2' type='radio' value='b'> <label for='_4'>1</label><br>
<input id='_5' name='_1' form='_f2' type='radio' value='c'> <label for='_5'>1.41421356…</label><br>
<input id='_6' name='_1' form='_f2' type='radio' value='d'> <label for='_6'>1.41592653…</label>
</fieldset>

<fieldset>
<legend>Please rate the task to rate this task:</legend>
<input id='_7' name='_1' form='_f3' type='radio' value='sad'> <label for='_7'>☹️</label><br>
<input id='_8' name='_1' form='_f3' type='radio' value='neutral'> <label for='_8'>😐</label><br>
<input id='_9' name='_1' form='_f3' type='radio' value='happy'> <label for='_9'>😊</label>
</fieldset>

Browsers’ default rendering of exclusive options can be changed significantly with CSS. The alternative look of the third example is implemented with CSS similar to the following.

fieldset {
	text-align: center;
}
[type=radio],
[type=radio] + label + br {
	display: none;
}
[type=radio] + label {
	cursor: pointer;
	font-size: 150%;
	line-height: 1.2;
	padding: 0 5px;
	vertical-align: middle;
}
[type=radio]:checked + label {
	font-size: 180%;
	line-height: 1;
}
[type=radio]:not(:checked) + label {
	filter: grayscale(1);
}