Form Field Combo

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->
<div class="formFieldCombo">

    <div class="formFieldCombo-items">
        <span class="formFieldCombo-item">
            <div class="formField">

                <label class="label is-optional" for="field-id">Bezeichnung</label>

                <span class="formField-field">
                    <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />

                </span>

            </div>

        </span>
        <span class="formFieldCombo-item is-supplement">
            <button class="button" data-icon-position="right"><svg class="icon is-arrow-right">
                    <use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
                </svg>
                <span class="button-label">Absenden</span></button>

        </span>
    </div>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


        
            <!-- With Select -->
<div class="formFieldCombo">

    <div class="formFieldCombo-items">
        <span class="formFieldCombo-item">
            <div class="formField">

                <label class="label is-optional" for="field-id">Bezeichnung</label>

                <span class="formField-field">
                    <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />

                </span>

            </div>

        </span>
        <span class="formFieldCombo-item is-supplement">
            <div class="formSelect is-required">

                <label class="label is-required" for="field-select">Währung</label>

                <span class="formSelect-input">
                    <span class="select">

                        <select id="field-select" required="">
                            <option value="EUR" selected="selected">
                                EUR
                            </option>
                            <option value="USD">
                                USD
                            </option>
                            <option value="YEN">
                                YEN
                            </option>
                        </select>

                    </span>

                </span>

            </div>

        </span>
    </div>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


        
            <!-- Required -->
<div class="formFieldCombo">

    <div class="formFieldCombo-items">
        <span class="formFieldCombo-item">
            <div class="formField is-required">

                <label class="label is-required" for="field-id">Bezeichnung</label>

                <span class="formField-field">
                    <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" />

                </span>

            </div>

        </span>
        <span class="formFieldCombo-item is-supplement">
            <div class="formSelect is-required">

                <label class="label is-required" for="field-select">Währung</label>

                <span class="formSelect-input">
                    <span class="select">

                        <select id="field-select" required="">
                            <option value="EUR" selected="selected">
                                EUR
                            </option>
                            <option value="USD">
                                USD
                            </option>
                            <option value="YEN">
                                YEN
                            </option>
                        </select>

                    </span>

                </span>

            </div>

        </span>
    </div>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


        
            <!-- Valid -->
<div class="formFieldCombo">

    <div class="formFieldCombo-items">
        <span class="formFieldCombo-item">
            <div class="formField is-required">

                <label class="label is-required" data-invalid="false" for="field-id">Bezeichnung</label>

                <span class="formField-field">
                    <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="false" />

                </span>

            </div>

        </span>
        <span class="formFieldCombo-item is-supplement">
            <div class="formSelect is-required">

                <label class="label is-required" data-invalid="false" for="field-select">Währung</label>

                <span class="formSelect-input">
                    <span class="select">

                        <select id="field-select" required="" aria-invalid="false">
                            <option value="EUR" selected="selected">
                                EUR
                            </option>
                            <option value="USD">
                                USD
                            </option>
                            <option value="YEN">
                                YEN
                            </option>
                        </select>

                    </span>

                </span>

            </div>

        </span>
    </div>

    <div class="formMessage js-formValidator-message">
        Ich bin erfolgreich geprüft.
    </div>

</div>


        
            <!-- Invalid -->
<div class="formFieldCombo">

    <div class="formFieldCombo-items">
        <span class="formFieldCombo-item">
            <div class="formField is-required">

                <label class="label is-required" data-invalid="true" for="field-id">Bezeichnung</label>

                <span class="formField-field">
                    <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="true" />

                </span>

            </div>

        </span>
        <span class="formFieldCombo-item is-supplement">
            <div class="formSelect is-required">

                <label class="label is-required" data-invalid="true" for="field-select">Währung</label>

                <span class="formSelect-input">
                    <span class="select">

                        <select id="field-select" required="" aria-invalid="true">
                            <option value="EUR" selected="selected">
                                EUR
                            </option>
                            <option value="USD">
                                USD
                            </option>
                            <option value="YEN">
                                YEN
                            </option>
                        </select>

                    </span>

                </span>

            </div>

        </span>
    </div>

    <div class="formMessage js-formValidator-message">
        Ich bin die Fehlerbeschreibung.
    </div>

</div>


        
            <!-- Disabled -->
<div class="formFieldCombo">

    <div class="formFieldCombo-items">
        <span class="formFieldCombo-item">
            <div class="formField is-disabled">

                <label class="label is-optional" data-disabled="true" for="field-id">Bezeichnung</label>

                <span class="formField-field">
                    <input class="field" type="text" id="field-id" name="fieldname" placeholder="" disabled="disabled" />

                </span>

            </div>

        </span>
        <span class="formFieldCombo-item is-supplement">
            <div class="formSelect is-disabled">

                <label class="label is-optional" data-disabled="true" for="field-select">Währung</label>

                <span class="formSelect-input">
                    <span class="select" data-disabled="true">

                        <select id="field-select" disabled="disabled">
                            <option value="EUR" selected="selected">
                                EUR
                            </option>
                            <option value="USD">
                                USD
                            </option>
                            <option value="YEN">
                                YEN
                            </option>
                        </select>

                    </span>

                </span>

            </div>

        </span>
    </div>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


        
            <!-- Doc Only -->
<section class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Ausprägungen</h2>

    </div>

    <div class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Mit Button (Default)</h2>

            <div class="doc-variant-configuration">
            </div>

        </header>

        <div class="formFieldCombo">

            <div class="formFieldCombo-items">
                <span class="formFieldCombo-item">
                    <div class="formField">

                        <label class="label is-optional" for="field-id">Bezeichnung</label>

                        <span class="formField-field">
                            <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />

                        </span>

                    </div>

                </span>
                <span class="formFieldCombo-item is-supplement">
                    <button class="button" data-icon-position="right"><svg class="icon is-arrow-right">
                            <use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
                        </svg>
                        <span class="button-label">Absenden</span></button>

                </span>
            </div>

            <div class="formMessage js-formValidator-message">
                Ich bin ein Hinweis.
            </div>

        </div>

    </div>
    <div class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Mit Select</h2>

            <div class="doc-variant-configuration">
            </div>

        </header>

        <div class="formFieldCombo">

            <div class="formFieldCombo-items">
                <span class="formFieldCombo-item">
                    <div class="formField">

                        <label class="label is-optional" for="field-id">Bezeichnung</label>

                        <span class="formField-field">
                            <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />

                        </span>

                    </div>

                </span>
                <span class="formFieldCombo-item is-supplement">
                    <div class="formSelect is-required">

                        <label class="label is-required" for="field-select">Währung</label>

                        <span class="formSelect-input">
                            <span class="select">

                                <select id="field-select" required="">
                                    <option value="EUR" selected="selected">
                                        EUR
                                    </option>
                                    <option value="USD">
                                        USD
                                    </option>
                                    <option value="YEN">
                                        YEN
                                    </option>
                                </select>

                            </span>

                        </span>

                    </div>

                </span>
            </div>

            <div class="formMessage js-formValidator-message">
                Ich bin ein Hinweis.
            </div>

        </div>

    </div>

</section>
<section class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Zustände</h2>

    </div>

    <div class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Default</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>.is-required</li>
                </ul>
            </div>

        </header>

        <div class="formFieldCombo">

            <div class="formFieldCombo-items">
                <span class="formFieldCombo-item">
                    <div class="formField is-required">

                        <label class="label is-required" for="field-id">Bezeichnung</label>

                        <span class="formField-field">
                            <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" />

                        </span>

                    </div>

                </span>
                <span class="formFieldCombo-item is-supplement">
                    <div class="formSelect is-required">

                        <label class="label is-required" for="field-select">Währung</label>

                        <span class="formSelect-input">
                            <span class="select">

                                <select id="field-select" required="">
                                    <option value="EUR" selected="selected">
                                        EUR
                                    </option>
                                    <option value="USD">
                                        USD
                                    </option>
                                    <option value="YEN">
                                        YEN
                                    </option>
                                </select>

                            </span>

                        </span>

                    </div>

                </span>
            </div>

            <div class="formMessage js-formValidator-message">
                Ich bin ein Hinweis.
            </div>

        </div>

    </div>
    <div class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Valid</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>.is-required</li>
                    <li>[aria-invalid="false"]</li>
                </ul>
            </div>

        </header>

        <div class="formFieldCombo">

            <div class="formFieldCombo-items">
                <span class="formFieldCombo-item">
                    <div class="formField is-required">

                        <label class="label is-required" data-invalid="false" for="field-id">Bezeichnung</label>

                        <span class="formField-field">
                            <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="false" />

                        </span>

                    </div>

                </span>
                <span class="formFieldCombo-item is-supplement">
                    <div class="formSelect is-required">

                        <label class="label is-required" data-invalid="false" for="field-select">Währung</label>

                        <span class="formSelect-input">
                            <span class="select">

                                <select id="field-select" required="" aria-invalid="false">
                                    <option value="EUR" selected="selected">
                                        EUR
                                    </option>
                                    <option value="USD">
                                        USD
                                    </option>
                                    <option value="YEN">
                                        YEN
                                    </option>
                                </select>

                            </span>

                        </span>

                    </div>

                </span>
            </div>

            <div class="formMessage js-formValidator-message">
                Ich bin erfolgreich geprüft.
            </div>

        </div>

    </div>
    <div class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Invalid</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>.is-required</li>
                    <li>[aria-invalid="true"]</li>
                </ul>
            </div>

        </header>

        <div class="formFieldCombo">

            <div class="formFieldCombo-items">
                <span class="formFieldCombo-item">
                    <div class="formField is-required">

                        <label class="label is-required" data-invalid="true" for="field-id">Bezeichnung</label>

                        <span class="formField-field">
                            <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="true" />

                        </span>

                    </div>

                </span>
                <span class="formFieldCombo-item is-supplement">
                    <div class="formSelect is-required">

                        <label class="label is-required" data-invalid="true" for="field-select">Währung</label>

                        <span class="formSelect-input">
                            <span class="select">

                                <select id="field-select" required="" aria-invalid="true">
                                    <option value="EUR" selected="selected">
                                        EUR
                                    </option>
                                    <option value="USD">
                                        USD
                                    </option>
                                    <option value="YEN">
                                        YEN
                                    </option>
                                </select>

                            </span>

                        </span>

                    </div>

                </span>
            </div>

            <div class="formMessage js-formValidator-message">
                Ich bin die Fehlerbeschreibung.
            </div>

        </div>

    </div>
    <div class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Disabled</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>.is-disabled</li>
                    <li>[disabled]</li>
                </ul>
            </div>

        </header>

        <div class="formFieldCombo">

            <div class="formFieldCombo-items">
                <span class="formFieldCombo-item">
                    <div class="formField is-disabled">

                        <label class="label is-optional" data-disabled="true" for="field-id">Bezeichnung</label>

                        <span class="formField-field">
                            <input class="field" type="text" id="field-id" name="fieldname" placeholder="" disabled="disabled" />

                        </span>

                    </div>

                </span>
                <span class="formFieldCombo-item is-supplement">
                    <div class="formSelect is-disabled">

                        <label class="label is-optional" data-disabled="true" for="field-select">Währung</label>

                        <span class="formSelect-input">
                            <span class="select" data-disabled="true">

                                <select id="field-select" disabled="disabled">
                                    <option value="EUR" selected="selected">
                                        EUR
                                    </option>
                                    <option value="USD">
                                        USD
                                    </option>
                                    <option value="YEN">
                                        YEN
                                    </option>
                                </select>

                            </span>

                        </span>

                    </div>

                </span>
            </div>

            <div class="formMessage js-formValidator-message">
                Ich bin ein Hinweis.
            </div>

        </div>

    </div>

</section>

Handle: @formfieldcombo
Preview:
- With layout
- Component only
Filesystem Path: components/03-fragments/formFragments/formFieldCombo/formFieldCombo.html
References (5): @formfield, @formfieldcombo, @formselect, @button, @formmessage
Referenced by (8): @formfieldcombo--with-select, @formfieldcombo--required, @formfieldcombo--valid, @formfieldcombo--invalid, @formfieldcombo--disabled, @formfieldcombo--doc-only, @searchfield, @searchfield--without-button


        <!-- Default -->
<div class="formFieldCombo{{#modifier}} {{.}}{{/modifier}}">

    <div class="formFieldCombo-items">
            {{#items}}
        <span class="formFieldCombo-item{{#if is-supplement}} is-supplement{{/if}}{{#if button}} is-supplement{{/if}}">
                {{#fromfield}}
            {{render '@formfield' (contextData '@formfieldcombo' this) merge=true}}
                {{/fromfield}}
                {{#formselect}}
            {{render '@formselect' (contextData '@formfieldcombo' this) merge=true}}
                {{/formselect}}
                {{#button}}
            {{render '@button' (contextData '@formfieldcombo' this) merge=true}}
                {{/button}}
        </span>
            {{/items}}
    </div>

    {{#message}}
        {{render '@formmessage' (contextData '@formfieldcombo' this) merge=true}}
    {{/message}}

</div>

<!-- With Select -->
<div class="formFieldCombo{{#modifier}} {{.}}{{/modifier}}">

    <div class="formFieldCombo-items">
            {{#items}}
        <span class="formFieldCombo-item{{#if is-supplement}} is-supplement{{/if}}{{#if button}} is-supplement{{/if}}">
                {{#fromfield}}
            {{render '@formfield' (contextData '@formfieldcombo' this) merge=true}}
                {{/fromfield}}
                {{#formselect}}
            {{render '@formselect' (contextData '@formfieldcombo' this) merge=true}}
                {{/formselect}}
                {{#button}}
            {{render '@button' (contextData '@formfieldcombo' this) merge=true}}
                {{/button}}
        </span>
            {{/items}}
    </div>

    {{#message}}
        {{render '@formmessage' (contextData '@formfieldcombo' this) merge=true}}
    {{/message}}

</div>

<!-- Required -->
<div class="formFieldCombo{{#modifier}} {{.}}{{/modifier}}">

    <div class="formFieldCombo-items">
            {{#items}}
        <span class="formFieldCombo-item{{#if is-supplement}} is-supplement{{/if}}{{#if button}} is-supplement{{/if}}">
                {{#fromfield}}
            {{render '@formfield' (contextData '@formfieldcombo' this) merge=true}}
                {{/fromfield}}
                {{#formselect}}
            {{render '@formselect' (contextData '@formfieldcombo' this) merge=true}}
                {{/formselect}}
                {{#button}}
            {{render '@button' (contextData '@formfieldcombo' this) merge=true}}
                {{/button}}
        </span>
            {{/items}}
    </div>

    {{#message}}
        {{render '@formmessage' (contextData '@formfieldcombo' this) merge=true}}
    {{/message}}

</div>

<!-- Valid -->
<div class="formFieldCombo{{#modifier}} {{.}}{{/modifier}}">

    <div class="formFieldCombo-items">
            {{#items}}
        <span class="formFieldCombo-item{{#if is-supplement}} is-supplement{{/if}}{{#if button}} is-supplement{{/if}}">
                {{#fromfield}}
            {{render '@formfield' (contextData '@formfieldcombo' this) merge=true}}
                {{/fromfield}}
                {{#formselect}}
            {{render '@formselect' (contextData '@formfieldcombo' this) merge=true}}
                {{/formselect}}
                {{#button}}
            {{render '@button' (contextData '@formfieldcombo' this) merge=true}}
                {{/button}}
        </span>
            {{/items}}
    </div>

    {{#message}}
        {{render '@formmessage' (contextData '@formfieldcombo' this) merge=true}}
    {{/message}}

</div>

<!-- Invalid -->
<div class="formFieldCombo{{#modifier}} {{.}}{{/modifier}}">

    <div class="formFieldCombo-items">
            {{#items}}
        <span class="formFieldCombo-item{{#if is-supplement}} is-supplement{{/if}}{{#if button}} is-supplement{{/if}}">
                {{#fromfield}}
            {{render '@formfield' (contextData '@formfieldcombo' this) merge=true}}
                {{/fromfield}}
                {{#formselect}}
            {{render '@formselect' (contextData '@formfieldcombo' this) merge=true}}
                {{/formselect}}
                {{#button}}
            {{render '@button' (contextData '@formfieldcombo' this) merge=true}}
                {{/button}}
        </span>
            {{/items}}
    </div>

    {{#message}}
        {{render '@formmessage' (contextData '@formfieldcombo' this) merge=true}}
    {{/message}}

</div>

<!-- Disabled -->
<div class="formFieldCombo{{#modifier}} {{.}}{{/modifier}}">

    <div class="formFieldCombo-items">
            {{#items}}
        <span class="formFieldCombo-item{{#if is-supplement}} is-supplement{{/if}}{{#if button}} is-supplement{{/if}}">
                {{#fromfield}}
            {{render '@formfield' (contextData '@formfieldcombo' this) merge=true}}
                {{/fromfield}}
                {{#formselect}}
            {{render '@formselect' (contextData '@formfieldcombo' this) merge=true}}
                {{/formselect}}
                {{#button}}
            {{render '@button' (contextData '@formfieldcombo' this) merge=true}}
                {{/button}}
        </span>
            {{/items}}
    </div>

    {{#message}}
        {{render '@formmessage' (contextData '@formfieldcombo' this) merge=true}}
    {{/message}}

</div>

<!-- Doc Only -->
{{#sections}}
<section class="doc-section">

    <div class="doc-header">

            {{#title}}
        <h2 class="doc-header-title">{{{.}}}</h2>
            {{/title}}

            {{#if attributes}}
        <div class="doc-header-configuration">
            <ul data-label="Attributes">
                    {{#attributes}}
                <li>{{{.}}}</li>
                    {{/attributes}}
            </ul>
        </div>
            {{/if}}

            {{#notes}}
        <div class="doc-header-notes">
            {{{.}}}
        </div>
            {{/notes}}

    </div>

        {{#variants}}
    <div class="doc-variant">

        <header class="doc-variant-header">

                {{#title}}
            <h2 class="doc-variant-title">{{{.}}}</h2>
                {{/title}}

            <div class="doc-variant-configuration">
                    {{#if modifiers}}
                <ul data-label="Modifier">
                        {{#modifiers}}
                    <li>{{{.}}}</li>
                        {{/modifiers}}
                </ul>
                    {{/if}}
            </div>

        </header>

        {{#samples}}
            {{render '@formfieldcombo' (contextData '@formfieldcombo' this) merge=true}}
        {{/samples}}

    </div>
        {{/variants}}

</section>
    {{/sections}}


        
        
            /* Default */
{
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "items": [
    {
      "fromfield": {
        "is-text": true,
        "label": "Bezeichnung",
        "message": null
      }
    },
    {
      "button": {
        "label": "Absenden",
        "icon": {
          "id": "arrow-right",
          "position": "right",
          "weight": "bold"
        }
      }
    }
  ]
}


        
            /* With Select */
{
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "items": [
    {
      "fromfield": {
        "is-text": true,
        "label": "Bezeichnung",
        "message": null
      }
    },
    {
      "is-supplement": true,
      "formselect": {
        "is-required": true,
        "id": "select",
        "label": "Währung",
        "placeholder": null,
        "message": null,
        "options": [
          {
            "label": "EUR",
            "value": "EUR",
            "is-selected": true
          },
          {
            "label": "USD",
            "value": "USD"
          },
          {
            "label": "YEN",
            "value": "YEN"
          }
        ]
      }
    }
  ]
}


        
            /* Required */
{
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "items": [
    {
      "fromfield": {
        "is-text": true,
        "label": "Bezeichnung",
        "message": null,
        "is-required": true
      }
    },
    {
      "is-supplement": true,
      "formselect": {
        "id": "select",
        "label": "Währung",
        "placeholder": null,
        "message": null,
        "options": [
          {
            "label": "EUR",
            "value": "EUR",
            "is-selected": true
          },
          {
            "label": "USD",
            "value": "USD"
          },
          {
            "label": "YEN",
            "value": "YEN"
          }
        ],
        "is-required": true
      }
    }
  ]
}


        
            /* Valid */
{
  "message": {
    "content": "Ich bin erfolgreich geprüft."
  },
  "items": [
    {
      "fromfield": {
        "is-text": true,
        "label": "Bezeichnung",
        "message": null,
        "is-required": true,
        "is-valid": true
      }
    },
    {
      "is-supplement": true,
      "formselect": {
        "id": "select",
        "label": "Währung",
        "placeholder": null,
        "message": null,
        "options": [
          {
            "label": "EUR",
            "value": "EUR",
            "is-selected": true
          },
          {
            "label": "USD",
            "value": "USD"
          },
          {
            "label": "YEN",
            "value": "YEN"
          }
        ],
        "is-required": true,
        "is-valid": true
      }
    }
  ]
}


        
            /* Invalid */
{
  "message": {
    "content": "Ich bin die Fehlerbeschreibung."
  },
  "items": [
    {
      "fromfield": {
        "is-text": true,
        "label": "Bezeichnung",
        "message": null,
        "is-required": true,
        "is-invalid": true
      }
    },
    {
      "is-supplement": true,
      "formselect": {
        "id": "select",
        "label": "Währung",
        "placeholder": null,
        "message": null,
        "options": [
          {
            "label": "EUR",
            "value": "EUR",
            "is-selected": true
          },
          {
            "label": "USD",
            "value": "USD"
          },
          {
            "label": "YEN",
            "value": "YEN"
          }
        ],
        "is-required": true,
        "is-invalid": true
      }
    }
  ]
}


        
            /* Disabled */
{
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "items": [
    {
      "fromfield": {
        "is-text": true,
        "label": "Bezeichnung",
        "message": null,
        "is-disabled": true
      }
    },
    {
      "is-supplement": true,
      "formselect": {
        "id": "select",
        "label": "Währung",
        "placeholder": null,
        "message": null,
        "options": [
          {
            "label": "EUR",
            "value": "EUR",
            "is-selected": true
          },
          {
            "label": "USD",
            "value": "USD"
          },
          {
            "label": "YEN",
            "value": "YEN"
          }
        ],
        "is-disabled": true
      }
    }
  ]
}


        
            /* Doc Only */
{
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "items": [
    {
      "fromfield": {
        "is-text": true,
        "label": "Bezeichnung",
        "message": null
      }
    },
    {
      "button": {
        "label": "Absenden",
        "icon": {
          "id": "arrow-right",
          "position": "right",
          "weight": "bold"
        }
      }
    }
  ],
  "sections": [
    {
      "title": "Ausprägungen",
      "variants": [
        {
          "title": "Mit Button (Default)",
          "samples": [
            {
              "message": {
                "content": "Ich bin ein Hinweis."
              },
              "items": [
                {
                  "fromfield": {
                    "is-text": true,
                    "label": "Bezeichnung",
                    "message": null
                  }
                },
                {
                  "button": {
                    "label": "Absenden",
                    "icon": {
                      "id": "arrow-right",
                      "position": "right",
                      "weight": "bold"
                    }
                  }
                }
              ]
            }
          ]
        },
        {
          "title": "Mit Select",
          "samples": [
            {
              "message": {
                "content": "Ich bin ein Hinweis."
              },
              "items": [
                {
                  "fromfield": {
                    "is-text": true,
                    "label": "Bezeichnung",
                    "message": null
                  }
                },
                {
                  "is-supplement": true,
                  "formselect": {
                    "is-required": true,
                    "id": "select",
                    "label": "Währung",
                    "placeholder": null,
                    "message": null,
                    "options": [
                      {
                        "label": "EUR",
                        "value": "EUR",
                        "is-selected": true
                      },
                      {
                        "label": "USD",
                        "value": "USD"
                      },
                      {
                        "label": "YEN",
                        "value": "YEN"
                      }
                    ]
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "title": "Zustände",
      "variants": [
        {
          "title": "Default",
          "modifiers": [
            ".is-required"
          ],
          "samples": {
            "message": {
              "content": "Ich bin ein Hinweis."
            },
            "items": [
              {
                "fromfield": {
                  "is-text": true,
                  "label": "Bezeichnung",
                  "message": null,
                  "is-required": true
                }
              },
              {
                "is-supplement": true,
                "formselect": {
                  "id": "select",
                  "label": "Währung",
                  "placeholder": null,
                  "message": null,
                  "options": [
                    {
                      "label": "EUR",
                      "value": "EUR",
                      "is-selected": true
                    },
                    {
                      "label": "USD",
                      "value": "USD"
                    },
                    {
                      "label": "YEN",
                      "value": "YEN"
                    }
                  ],
                  "is-required": true
                }
              }
            ]
          }
        },
        {
          "title": "Valid",
          "modifiers": [
            ".is-required",
            "[aria-invalid=\"false\"]"
          ],
          "samples": {
            "message": {
              "content": "Ich bin erfolgreich geprüft."
            },
            "items": [
              {
                "fromfield": {
                  "is-text": true,
                  "label": "Bezeichnung",
                  "message": null,
                  "is-required": true,
                  "is-valid": true
                }
              },
              {
                "is-supplement": true,
                "formselect": {
                  "id": "select",
                  "label": "Währung",
                  "placeholder": null,
                  "message": null,
                  "options": [
                    {
                      "label": "EUR",
                      "value": "EUR",
                      "is-selected": true
                    },
                    {
                      "label": "USD",
                      "value": "USD"
                    },
                    {
                      "label": "YEN",
                      "value": "YEN"
                    }
                  ],
                  "is-required": true,
                  "is-valid": true
                }
              }
            ]
          }
        },
        {
          "title": "Invalid",
          "modifiers": [
            ".is-required",
            "[aria-invalid=\"true\"]"
          ],
          "samples": {
            "message": {
              "content": "Ich bin die Fehlerbeschreibung."
            },
            "items": [
              {
                "fromfield": {
                  "is-text": true,
                  "label": "Bezeichnung",
                  "message": null,
                  "is-required": true,
                  "is-invalid": true
                }
              },
              {
                "is-supplement": true,
                "formselect": {
                  "id": "select",
                  "label": "Währung",
                  "placeholder": null,
                  "message": null,
                  "options": [
                    {
                      "label": "EUR",
                      "value": "EUR",
                      "is-selected": true
                    },
                    {
                      "label": "USD",
                      "value": "USD"
                    },
                    {
                      "label": "YEN",
                      "value": "YEN"
                    }
                  ],
                  "is-required": true,
                  "is-invalid": true
                }
              }
            ]
          }
        },
        {
          "title": "Disabled",
          "modifiers": [
            ".is-disabled",
            "[disabled]"
          ],
          "samples": {
            "message": {
              "content": "Ich bin ein Hinweis."
            },
            "items": [
              {
                "fromfield": {
                  "is-text": true,
                  "label": "Bezeichnung",
                  "message": null,
                  "is-disabled": true
                }
              },
              {
                "is-supplement": true,
                "formselect": {
                  "id": "select",
                  "label": "Währung",
                  "placeholder": null,
                  "message": null,
                  "options": [
                    {
                      "label": "EUR",
                      "value": "EUR",
                      "is-selected": true
                    },
                    {
                      "label": "USD",
                      "value": "USD"
                    },
                    {
                      "label": "YEN",
                      "value": "YEN"
                    }
                  ],
                  "is-disabled": true
                }
              }
            ]
          }
        }
      ]
    }
  ]
}

File:

Content:


                                @import "_formFieldCombo.styles";

%formFieldCombo {

    .button {
        border-top-right-radius: nth($field_border-radius, 1);
        border-bottom-right-radius: nth($field_border-radius, 1);
    }

    &--on-dark & {

        &-items {
            column-gap: calc(var(--bw) + 1px);
        }

    }

}

[data-theme="dark"] %formFieldCombo {
    @extend %formFieldCombo--on-dark;
}

URL: /components/raw/formfieldcombo/_formFieldCombo.scss
Filesystem Path: components/03-fragments/formFragments/formFieldCombo/_formFieldCombo.scss
Size: 388 Bytes

Content:


                                %formFieldCombo {
    @include stack-spacing();

    &-items {
        display: flex;
        align-items: flex-end;
    }

    &-item {
        flex: 1 1 auto;
        position: relative;

        &:focus-within {
            z-index: 2;
        }

        &:has(.is-invalid) {
            z-index: 1;
        }

        &:not(:first-child) {
            margin-left: (-1 * map.get($field_border-width_map, left));

            .field,
            .select select {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

        }

        &:not(:last-child) {

            .field,
            .select select {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

        }

        &.is-supplement {
            flex-grow: 0;

            .label {
                @extend %visually-hidden;
            }

        }

    }

    .formField {
        @include stack-spacing(0);
    }

    .button {
        @include stack-spacing(0);

        border-radius: $field_border-radius;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        padding: 0 !important;

        aspect-ratio: 1;

        &-label {
            @extend %visually-hidden;
        }

    }

        // Set height explicitly to fix display bug in Mobile Safari

    input,
    select,
    button,
    .formFieldCombo-text {
        height: $field_height;

        @include not-on-desktop(){
            height: $field_height--mobile;
        }

    }

}

.formFieldCombo {
    @extend %formFieldCombo;

    &-items {
        @extend %formFieldCombo-items;
    }

    &-item {
        @extend %formFieldCombo-item;
    }

}

URL: /components/raw/formfieldcombo/_formFieldCombo.styles.scss
Filesystem Path: components/03-fragments/formFragments/formFieldCombo/_formFieldCombo.styles.scss
Size: 1.7 KB