Swegon Component Library

Form Examples 

<section class="panel theme--grey 
    panel--compact ">
    <div class="panel__inner">
        <div class="row row--justify-around">
            <div class="col col--span-m-8">
                <div class="form-item  ">
                    <label for="input-field" class="form-item__label">
                        Input field
                        *
                    </label>

                    <input id="input-field" type="text" class="input__input" placeholder="Placeholder" required>

                </div>

                <fieldset class="form-item">
                    <legend class="form-item__legend" id="">Radio buttons</legend>

                    <label for="radio-1" class="radio__label">
                        <input id="radio-1" type="radio" name="radios" class="radio__input">
                        <span>Radio button 1</span>
                    </label>
                    <label for="radio-2" class="radio__label">
                        <input id="radio-2" type="radio" name="radios" class="radio__input">
                        <span>Radio button 2</span>
                    </label>

                </fieldset>

                <div class="form-item">
                    <legend class="form-item__legend">Checkboxes</legend>

                    <div class="checkbox__item ">
                        <label class="checkbox__label " for="checkbox-1">
                            <input class="checkbox__input " type="checkbox" name="checkboxes" id="checkbox-1" value="checkbox-1">
                            <span class="checkbox__title">Checkbox 1</span>
                        </label>
                    </div>

                </div>

                <div class="form-item form-item--select ">
                    <label for="select" class="form-item__label">
                        Dropdown
                    </label>
                    <select id="select" class="select__select " name="Select">
                        <option class="select__option" value="select">Option 1</option>
                        <option class="select__option" value="select">Option 2</option>
                    </select>
                </div>

                <div class="form-item form-item--select ">
                    <label for="select" class="form-item__label">
                        Dropdown
                    </label>
                    <select id="select" class="select__select " name="Select" aria-invalid="true">
                        <option class="select__option" value="select">Option 1</option>
                        <option class="select__option" value="select">Option 2</option>
                    </select>
                    <div class="form-item__error-msg">Här gick det fel</div>
                </div>

                <div class="form-item">
                    <label for="textfield" class="form-item__label">
                        Textfield
                    </label>

                    <textarea id="textfield" placeholder="Messages" class="textarea__input"></textarea>

                </div>

                <button class="button button--compact  ">
                    <span class="button__label">Submit</span>
                </button>
            </div>
        </div>
    </div>
</section>

<section class="panel theme--grey 
    panel--compact ">
    <div class="panel__inner">
        <div class="row row--justify-around h-text-align-center-m">
            <div class="col col--span-12 col--span-s-8">
                <h2>HubSpot form</h2>
                <div class="preamble">
                    <p>Here is a example form for Hubspot.</p>
                </div>
            </div>
        </div>
        <div class="row row--justify-around">
            <div class="col col--span-m-8">
                <div id="form_2635">
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            hbspt.forms.create({
                                css: '',
                                portalId: "3433011",
                                formId: "8365249e-1181-48ae-a835-1bbcb005600f",
                                target: "#form_2635"
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
        </article>
    </div>
</section>
 
{{#> @panel theme="grey" modifiers="compact"}}
    <div class="row row--justify-around">
        <div class="col col--span-m-8">
            {{render "@input--default"}}
            {{render "@radio--default"}}
            {{render "@checkbox--default"}}
            {{render "@select--default"}}
            {{render "@select--with-error-message"}}
            {{render "@textarea--default"}}
            {{{form.disclaimer}}}
            {{>@button tag="button" label="Submit"}}
        </div>
    </div>
{{/@panel}}


{{#> @panel theme="grey" modifiers="compact"}}
    <div class="row row--justify-around h-text-align-center-m">
        <div class="col col--span-12 col--span-s-8">
            <h2>HubSpot form</h2>
            <div class="preamble">
                <p>Here is a example form for Hubspot.</p>
            </div>
        </div>
    </div>
    <div class="row row--justify-around">
        <div class="col col--span-m-8">
            <div id="form_2635">
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        hbspt.forms.create({
                            css: '',
                            portalId: "3433011",
                            formId: "8365249e-1181-48ae-a835-1bbcb005600f",
                            target: "#form_2635"
                        });
                    });
                </script>
            </div>
        </div>
    </div>
</article>
{{/@panel}}
 
{
  "marketSelectorModal": {
    "id": "market-selector",
    "closeLabel": "Stäng"
  }
}

No notes defined.