Option blocks

Use options blocks when users can select an item from a list of options with long text.

Style of communication

Looks awkward when trying to chat, e.g. stands too close, stares or doesn’t use facial expressions. Often gets a dismissive or negative reaction.

Has some awareness of differences of how to talk to familiar vs unfamiliar people but does not always make appropriate adjustments.

Always talks in the same way no matter who they are talking to or wherever they are. Doesn't listen to advice to change.

<fieldset aria-describedby="style-of-communication-error" id="style-of-communication" class="field field--set field--set-option-block ">
  <legend class="field__label field__label--block has-mb-3">Style of communication</legend>
  <div class="option-block">
    <div class="option-block-item">
      <input class="field__input" type="radio" name="with-label" id="option-1" />
      <label class="field__label field__label--block" for="option-1">Looks awkward when trying to chat, e.g. stands too close, stares or doesn’t use facial expressions. Often gets a dismissive or negative reaction.</label>
    </div>
    <div class="option-block-item">
      <input class="field__input" type="radio" name="with-label" id="option-2" />
      <label class="field__label field__label--block" for="option-2">Has some awareness of differences of how to talk to familiar vs unfamiliar people but does not always make appropriate adjustments.</label>
    </div>
    <div class="option-block-item">
      <input class="field__input" type="radio" name="with-label" id="option-3" />
      <label class="field__label field__label--block" for="option-3">Always talks in the same way no matter who they are talking to or wherever they are. Doesn't listen to advice to change.</label>
    </div>
  </div>
</fieldset>

With error

Display an inline error when there's something wrong.

Make sure:

The form control has the aria-describedby attribute and references an associated error message
The associated error message has a unique ID

Remove the error state when the option blocks are updated, to avoid confusing users.

To do this:

Remove the field--error class
Remove the <div> element with the class field__message field__message--error

Refresh this page to reset the error state in this example.

Style of communication

Looks awkward when trying to chat, e.g. stands too close, stares or doesn’t use facial expressions. Often gets a dismissive or negative reaction.

Has some awareness of differences of how to talk to familiar vs unfamiliar people but does not always make appropriate adjustments.

Always talks in the same way no matter who they are talking to or wherever they are. Doesn't listen to advice to change.

This field is required

<fieldset aria-describedby="terms-error" id="terms" class="field field--set field--set-option-block field--error">
  <legend class="field__label field__label--block">Do you agree to these terms?</legend>
  <div class="option-block">
    <div class="option-block-item">
      <input class="field__input" type="radio" name="options-error" id="A-mcv7qv" />
      <label class="field__label field__label--block" for="A-mcv7qv">Looks awkward when trying to chat, e.g. stands too close, stares or doesn’t use facial expressions. Often gets a dismissive or negative reaction.</label>
    </div>
    <div class="option-block-item">
      <input class="field__input" type="radio" name="options-error" id="B-mcv7qv" />
      <label class="field__label field__label--block" for="B-mcv7qv">Has some awareness of differences of how to talk to familiar vs unfamiliar people but does not always make appropriate adjustments.</label>
    </div>
    <div class="option-block-item">
      <input class="field__input" type="radio" name="options-error" id="C-mcv7qv" />
      <label class="field__label field__label--block" for="C-mcv7qv">Always talks in the same way no matter who they are talking to or wherever they are. Doesn't listen to advice to change.</label>
    </div>
  </div>
  <div id="terms-error" class="field__message field__message--error">This field is required</div>
</fieldset>

With error​

With error