Standard Life Digital Framework

Binary

full screen new window example HTML markup

The interactive question binary component is used to reveal information based on a user's selection between two input options. Typically this can be used for a simple yes/no answer question.

Usage

Use this component for a simple binary choice question such as a yes/no or two choice question. This component uses the bootstrap grid and requires javascript for functionality and accessibility.

Add a unique id to the containing element with class slb-question.
Each form-check-input element must include the attribute data-toggle="collapse" and data-target="#ANSWER_ELEMENT_ID" for the bootstrap collapse plugin to function. The data-target attribute points to the corresponding answer panel that the input controls using the element's id.
On the answer element, the modifier slb-question__answer--binary must be added to the second answer element. Additionally, add the bootstrap class collapse on answer elements to make them function as collapsing elements. Use the class show with collapse to set a panel to show by default when displayed. To ensure that answer elements function properly as a group, add the attribute data-parent="#UNIQUE_ACCORDION_PARENT_ID" to each answer element to link them to the parent element of the interactive question.

Accessible attributes

Accessible attribute	Description
`aria-label="COMPONENT DESCRIPTION"`	Use on the input container element, adds a label to the radio input container using the role tablist that describes the purpose.
`aria-expanded="false"`	Use on the input element, indicates if the answer panel is visible, sets to true when answer is shown.
`aria-controls="ANSWER-ELEMENT-ID"`	Use on the input element, refers to the answer element associated with each radio input button.
`aria-labelledby="BUTTON-ELEMENT-ID"`	Use on the answer element, refers to the button element that controls the answer.

Modifier selectors

Modifier selector	Description
`slb-question--binary`	Two question radio button inputs, buttons are always visible when answer is shown, answer points to selected input

JavaScript Support

JavaScript Support class name	Description
`data-toggle="collapse"`	Use on input element to control the collapsing element. (See bootstrap collapse plugin documentation)
`data-target="#ANSWER-ELEMENT-ID"`	Use on input element to control the collapsing element. (See bootstrap collapse plugin documentation)
`data-parent="#UNIQUE-ACCORDION-PARENT_ID"`	Use on each answer element to group with the parent element. (See bootstrap collapse plugin documentation)
`collapse`	Use on answer element to indicate that this element is a collapsing element. (See bootstrap collapse plugin documentation)
`show`	Use on answer element to set panel to initially display. (See bootstrap collapse plugin documentation)

How do you plan to answer this question?

Yes

Answer

Yes. Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.

Answer

No. Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.

Markup: interactive-question\interactive-question-binary.hbs

Copy

<div class="container">
    <form>
        <fieldset class="slb-question" id="question-binary-id" aria-label="Interactive question">
            <legend class="slb-question__text">How do you plan to answer this question?</legend>
            <div class="row">
                <div class="form-check col-sm-6">
                    <input type="radio" class="form-check-input" id="input-id-yes" data-toggle="collapse" data-target="#answer-id-yes" name="question-input-block" aria-expanded="false" aria-controls="answer-id-yes">
                    <label class="form-check-label form-check-label--question" for="input-id-yes">Yes</label>
                </div>
                <div class="form-check col-sm-6">
                    <input type="radio" class="form-check-input" id="input-id-no" data-toggle="collapse" data-target="#answer-id-no" name="question-input-block" aria-expanded="false" aria-controls="answer-id-no">
                    <label class="form-check-label form-check-label--question" for="input-id-no">No</label>
                </div>
            </div>
            <div class="row mx-0">
                <div class="slb-question__answer col-12 collapse" id="answer-id-yes" data-parent="#question-binary-id" aria-labelledby="input-id-yes">
                    <div class="slb-question__answer-content">
                        <h6>Answer</h6>
                        <p>Yes. Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
                    </div>
                </div>
                <div class="slb-question__answer slb-question__answer--binary col-12 collapse" id="answer-id-no" data-parent="#question-binary-id" aria-labelledby="input-id-no">
                    <div class="slb-question__answer-content">
                        <h6>Answer</h6>
                        <p>No. Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</div>

Source: components/_interactive-question.scss