In the Address section I have been defining UK counties to populate the State field when a Country is selected. I noticed that there is a standard text input when there is no defined states/regions/areas for a country and a drop down field for states when there is defined states.

When a country like the US or the UK is selected both fields are shown however ideally it should only be the dropdown. See image of the problem:


Is there any logic that can be added to toggle it on/off ?

<label for="{{ modelName }}-state">County / State / Region</label>

{% set options = (model and states[model.countryId] is defined ? states[model.countryId] : []) %}
<select id="{{ modelName }}-stateId" data-modelname="{{ modelName }}" class="address-stateId u-full-width {% if options|length == 0 or (model and model.stateName) %}hidden{% endif %}" name="{{ modelName }}[stateValue]">
  {% for key, option in options %}
    {% set optionValue = (model ? model.stateId : '') %}
    <option value="{{ key }}" {% if key == optionValue %}selected{% endif %}>{{ option }}</option>
  {% endfor %}

<input type="text" data-modelname="{{ modelName }}" id="{{ modelName }}-stateName" class="address-stateName {% if options|length > 0 or (model and model.stateId) %}hidden{% endif %} u-full-width" {% if model and model.stateName %}name="{{ modelName }}[stateValue]" value="{{ model.stateName}}"{% endif %}>

1 Answer 1


This ended up being a css issue. In the CSS I had to create the following rule.

input[type="text"].hidden { display: none; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.