Vragen

Component preview opent in nieuw tabblad

There are no notes for this item.

<main>
    <form>
        <div class="dso-app-heading">

            <h1>Aanvraag Laan van Eik en Duinen 125, Den Haag</h1>

            <h2 class="dso-steps-indicator">
                4. Vragen

                <span class="dso-step">
                    Stap 4/7
                </span>

            </h2>

        </div>

        <div class="dso-accordion">
            <div class="dso-accordion-section">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Woning

                    </button>
                </h3>
            </div>
            <div class="dso-accordion-section">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Bouwwerkzaamheden

                    </button>
                </h3>
            </div>
            <div class="dso-accordion-section dso-open">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="true">Plaats van het bouwwerk

                    </button>
                </h3>
                <div class="dso-section-body">

                    <div class="form-group dso-input dso-input-text">
                        <div class="dso-label-container">
                            <label for="omgevingsvergunningPostcode" class="control-label">
                                Postcode
                            </label>

                        </div>
                        <div class="dso-field-container">

                            <input type="text" id="omgevingsvergunningPostcode" class="form-control" size="8">

                        </div>

                    </div>

                    <div class="form-group dso-input dso-input-text">
                        <div class="dso-label-container">
                            <label for="omgevingsvergunningHuisnummer" class="control-label">
                                Huisnummer
                            </label>

                        </div>
                        <div class="dso-field-container">

                            <input type="text" id="omgevingsvergunningHuisnummer" class="form-control" size="8">

                        </div>

                    </div>

                    <div class="form-group dso-input dso-input-text">
                        <div class="dso-label-container">
                            <label for="omgevingsvergunningToevoeging" class="control-label">
                                Huisnummer toevoeging
                            </label>

                        </div>
                        <div class="dso-field-container">

                            <input type="text" id="omgevingsvergunningToevoeging" class="form-control" size="8">

                        </div>

                    </div>

                    <div class="form-group dso-input dso-input-text">
                        <div class="dso-label-container">
                            <label for="omgevingsvergunningStraatnaam" class="control-label">
                                Straatnaam
                            </label>

                        </div>
                        <div class="dso-field-container">

                            <input type="text" id="omgevingsvergunningStraatnaam" class="form-control">

                        </div>

                    </div>

                    <div class="form-group dso-input dso-input-text">
                        <div class="dso-label-container">
                            <label for="omgevingsvergunningWoonplaats" class="control-label">
                                Woonplaats
                            </label>

                        </div>
                        <div class="dso-field-container">

                            <input type="text" id="omgevingsvergunningWoonplaats" class="form-control">

                        </div>

                    </div>

                    <div class="dso-form-buttons">

                        <button type="submit" class="btn btn-primary"><span>Volgende stap</span></button>

                    </div>

                </div>
            </div>
            <div class="dso-accordion-section">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Afmetingen van het bouwwerk

                    </button>
                </h3>
            </div>
            <div class="dso-accordion-section">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Extra werkzaamheden

                    </button>
                </h3>
            </div>
        </div>

        <div class="dso-form-buttons">
            <div class="dso-aside">
                <button type="button" class="btn btn-link">
                    <dso-icon icon="chevron-left"></dso-icon><span>Vorige stap</span>
                </button>

            </div>
            <button type="button" class="btn btn-primary"><span>Volgende stap</span></button>

        </div>
    </form>
</main>
<main>
  <form>
    {% render '@application-heading', appheading %}
    {% render '@accordion', accordion %}
    <div class="dso-form-buttons">
      <div class="dso-aside">
        {% render '@button', {label:'Vorige stap', type:'button', modifier:'link', icon: 'chevron-left'} %}
      </div>
      {% render '@button', {label:'Volgende stap', type:'button', modifier:'primary'} %}
    </div>
  </form>
</main>
appheading:
  title: Aanvraag Laan van Eik en Duinen 125, Den Haag
  subtitle: 4. Vragen
  step: Stap 4/7
accordion:
  sections:
    - title: Woning
      id: panel1
    - title: Bouwwerkzaamheden
      id: panel2
    - title: Plaats van het bouwwerk
      id: panel3
      open: true
      fieldsets:
        - groups:
            - id: omgevingsvergunningPostcode
              inputType: input
              type: text
              label: Postcode
              size: 8
            - id: omgevingsvergunningHuisnummer
              inputType: input
              type: text
              label: Huisnummer
              size: 8
            - id: omgevingsvergunningToevoeging
              inputType: input
              type: text
              label: Huisnummer toevoeging
              size: 8
            - id: omgevingsvergunningStraatnaam
              inputType: input
              type: text
              label: Straatnaam
            - id: omgevingsvergunningWoonplaats
              inputType: input
              type: text
              label: Woonplaats
      buttons:
        - type: submit
          modifier: primary
          label: Volgende stap
    - title: Afmetingen van het bouwwerk
      id: panel4
    - title: Extra werkzaamheden
      id: panel5