City of Ghent Style Guide

Address

When to use this component

Use the address component to help users enter address details.

When not to use this component

Do not use the address component for other uses than letting users enter address details.

How it works

  • The address component consists of input components to enter address details and a select component to select the country.
  • The fields are grouped in a fieldset.
  • The fieldset uses a legend to present a description for the address details fieldset. See the example.
  • The required fields are: street, number, postal code, municipality and country. The mailbox field is optional.

Usage, behavior, layout and validation

The address component is a form element that should always be used in a form. For a description of the usage, the behavior, the layout and validation of form elements, see the form component examples and documentation.

Address 

<fieldset>
  <legend>Address details</legend>
  {% include '@form-item' with {
    "label": "Street",
    "id": _self.name ~ "-street_id",
    "input_component": "input",
    "type": "text",
    "name": _self.name ~ "-street_name",
    "field_description": null
  } %}
  {% include '@form-row' with {first: {
    label: 'Number',
    id: 'number_id',
    input_component: 'input',
    type: 'text',
    name: 'number_name',
    modifier: 'error',
    field_message: 'Lorem ipsum dolor sit amet.'
  }, second: {
    label: 'Mailbox',
    id: 'mailbox_id',
    input_component: 'input',
    type: 'text',
    name: 'mailbox_name',
    label_optional: 'Optional'
  }} %}
  {% include '@form-row' with {first: {
    label: 'Postal code',
    id: 'postal-code_id',
    input_component: 'input',
    type: 'text',
    name: 'postal-code_name'
  }, second: {
    label: 'Municipality',
    id: 'municipality_id',
    input_component: 'input',
    type: 'text',
    name: 'municipality_name'
  }} %}
  {% include '@select' with {
    id: 'select',
    label: 'Country',
    label_optional: false,
    field_description: null,
    input_component: 'input-select',
    options: [
      {
        label: 'Option 1'
      },
      {
        label: 'Option 2'
      }
    ]
  } %}
</fieldset>
 
<fieldset>
    <legend>Address details</legend>
    <div class="form-item ">
        <label for="default-street_id">Street
        </label>
        <div class="form-columns">
            <div class="form-item-column">

                <input type="text" id="default-street_id" name="default-street_name" class="text" />
            </div>
            <div class="form-item-column">
            </div>
        </div>
    </div>
    <div class='form-row'>
        <div class="form-item  error stacked">
            <label for="number_id">Number
            </label>
            <div class="form-columns">
                <div class="form-item-column">

                    <input type="text" id="number_id" aria-describedby="number_id-message" name="number_name" class="text error" aria-invalid="true" />
                </div>
                <div class="form-item-column">
                    <div class="field-message error" role="alert" id="number_id-message">
                        Lorem ipsum dolor sit amet.
                        <div class="accolade "></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-item  stacked">
            <label for="mailbox_id">Mailbox
                <span class="label-optional">
                    Optional
                </span>
            </label>
            <div class="form-columns">
                <div class="form-item-column">

                    <input type="text" id="mailbox_id" name="mailbox_name" class="text" />
                </div>
                <div class="form-item-column">
                </div>
            </div>
        </div>
    </div>
    <div class='form-row'>
        <div class="form-item  stacked">
            <label for="postal-code_id">Postal code
            </label>
            <div class="form-columns">
                <div class="form-item-column">

                    <input type="text" id="postal-code_id" name="postal-code_name" class="text" />
                </div>
                <div class="form-item-column">
                </div>
            </div>
        </div>
        <div class="form-item  stacked">
            <label for="municipality_id">Municipality
            </label>
            <div class="form-columns">
                <div class="form-item-column">

                    <input type="text" id="municipality_id" name="municipality_name" class="text" />
                </div>
                <div class="form-item-column">
                </div>
            </div>
        </div>
    </div>
    <div class="form-item ">
        <label for="select">Country
        </label>
        <div class="form-columns">
            <div class="form-item-column">
                <select name="select" id="select">

                    <option>Option 1</option>

                    <option>Option 2</option>

                </select>
            </div>
            <div class="form-item-column">
            </div>
        </div>
    </div>
</fieldset>
 
/* No context defined. */