Selectable

Component preview

<!-- Default -->
<div class="dso-selectable">
    <input type="radio" id="selectable--default" name="selectable--default">
    <label for="selectable--default">
        Label
    </label>

</div>

<!-- Invalid -->
<div class="dso-selectable">
    <input type="radio" id="selectable--invalid" name="selectable--invalid" aria-invalid="true">
    <label for="selectable--invalid">
        Label
    </label>

</div>

<!-- Disabled -->
<div class="dso-selectable">
    <input type="radio" id="selectable--disabled" name="selectable--disabled" disabled>
    <label for="selectable--disabled">
        Label
    </label>

</div>

<!-- Required -->
<div class="dso-selectable">
    <input type="radio" id="selectable--required" name="selectable--required" required>
    <label for="selectable--required">
        Label
    </label>

</div>

<!-- Checked -->
<div class="dso-selectable">
    <input type="radio" id="selectable--checked" name="selectable--checked" required>
    <label for="selectable--checked">
        Label
    </label>

</div>

<!-- Info Closed -->
<div class="dso-selectable">
    <input type="radio" id="selectable--info-closed" name="selectable--info-closed">
    <label for="selectable--info-closed">
        Label
    </label>

    <button type="button" class="btn dso-info-button" aria-expanded="false">
        <span class="sr-only">Toelichting bij deze optie</span>
    </button>

</div>

<!-- Info -->
<div class="dso-selectable">
    <input type="radio" id="selectable--info" name="selectable--info">
    <label for="selectable--info">
        Label
    </label>

    <button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
        <span class="sr-only">Toelichting bij deze optie</span>
    </button>

    <div class="dso-info">

        <button type="button">
            <span class="sr-only">Sluiten</span>
        </button>

        <div class="dso-rich-content">
            <p>Toelichting bij optie</p>

        </div>
    </div>

</div>

<!-- Info Closed -->
<div class="dso-selectable">
    <input type="radio" id="selectable--info-closed" name="selectable--info-closed">
    <label for="selectable--info-closed">
        Label
    </label>

    <div class="dso-info">

        <div class="dso-rich-content">
            <p>Deze toelichting kan niet worden gesloten</p>

        </div>
    </div>

</div>

<div {{ className('dso-selectable', modifiers) }}>
  <input
    type="{{ type }}"
    id="{{ id or _self.handle }}"
    name="{{ name or _self.handle }}"
    {{ attributes(
      [value, 'value', value],
      [invalid, 'aria-invalid', invalid],
      [ariaDescribedBy, 'aria-describedby', ariaDescribedBy],
      [disabled, 'disabled'],
      [required, 'required'],
      [checked, 'checked']
    ) }}
  >
  <label for="{{ id or _self.handle }}">
    {{ label | safe }}
  </label>
  {% if infoText and not infoStatic %}
    {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
  {% endif %}
  {% if infoText and (infoOpen or infoStatic) %}
    {% render '@info', {infoText: infoText, static: infoStatic} %}
  {% endif %}
</div>

/* Default */
type: radio
label: Label

/* Invalid */
type: radio
label: Label
invalid: true

/* Disabled */
type: radio
label: Label
disabled: true

/* Required */
type: radio
label: Label
required: true

/* Checked */
type: radio
label: Label
required: true

/* Info Closed */
type: radio
label: Label
infoText: >
  <p>Deze informatie is pas zichtbaar als de informatie-button wordt
  geactiveerd</p>

/* Info */
type: radio
label: Label
infoOpen: true
infoText: |
  <p>Toelichting bij optie</p>

/* Info Closed */
type: radio
label: Label
infoStatic: true
infoText: |
  <p>Deze toelichting kan niet worden gesloten</p>