VvebOIDC/public/admin/default/field/field-item.html

<div class="accordion-item" data-v-field>
  <div class="accordion-header">
    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#field-id-1-item" aria-controls="field-id-1-iem">
      <div class="flex-grow-1">(new)</div>
    </button>
    <div class="buttons">
      <a type="button" title="Duplicate" class="btn btn-outline-secondary border-secondary-subtle btn-sm btn-clone">
        <i class="la la-lg la-copy"></i>
      </a>
      <a type="button" title="Remove" class="btn btn-outline-danger border-danger-subtle btn-sm btn-remove">
        <i class="la la-lg la-minus-circle"></i>
      </a>
    </div>
  </div>

  <div id="field-id-1-item" class="accordion-collapse collapse">
    <div class="accordion-body settings">


      <ul class="nav nav-tabs px-3 pt-3" role="tablist" style="margin-top: -1px;margin-left: -1px;">

        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="field-id-1-general-tab" data-bs-toggle="tab" data-bs-target="#field-id-1-general" type="button" role="tab" aria-controls="general" aria-selected="true">
            <i class="icon-settings-outline"></i>
            <span>General</span>
          </button>
        </li>

        <li class="nav-item" role="presentation">
          <button class="nav-link" id="field-id-1-local-tab" data-bs-toggle="tab" data-bs-target="#field-id-1-local" type="button" role="tab" aria-controls="contact" aria-selected="false" tabindex="-1">
            <i class="icon-checkmark-circle-outline"></i>
            <span>Validation</span>
          </button>
        </li>

        <li class="nav-item" role="presentation">
          <button class="nav-link" id="field-id-1-media-tab" data-bs-toggle="tab" data-bs-target="#field-id-1-media" type="button" role="tab" aria-controls="contact" aria-selected="false" tabindex="-1">
            <i class="icon-brush-outline"></i>
            <span>Presentation</span>
          </button>
        </li>

        <li class="nav-item" role="presentation">
          <button class="nav-link" id="field-id-1-comments-tab" data-bs-toggle="tab" data-bs-target="#field-id-1-comments" type="button" role="tab" aria-controls="comments" aria-selected="false" tabindex="-1">
            <i class="icon-help-circle-outline"></i>
            <span>Conditionals</span>
          </button>
        </li>

      </ul>

      <div class="tab-content p-4">

        <div class="tab-pane active show" id="field-id-1-general" role="tabpanel" aria-labelledby="general-tab">

          <div class="row mb-3">
            <label for="input-language" class="col-sm-2 col-form-label">Type</label>
            <div class="col-sm-10 col-xl-8 col-xxl-6">
              <select name="field[1][type]" class="form-select" data-v-field-type>
                <option value="1" data-v-option>
                  <span data-v-option-name>Tax 1 (-2.00)</span>
                </option>
                <option value="2" data-v-country data-v-country-country_id>
                  <span data-v-country-name>Tax 2 (19%)</span>
                </option>

                <optgroup label="Basic">
                  <option value="text" selected="selected" data-v-option>Text</option>
                  <option value="textarea" data-v-option>Text Area</option>
                  <option value="number" data-v-option>Number</option>
                  <option value="range" data-v-option>Range</option>
                  <option value="email" data-v-option>Email</option>
                  <option value="url" data-v-option>Url</option>
                  <option value="password" data-v-option>Password</option>
                </optgroup>
                <optgroup label="Content">
                  <option value="image">Image</option>
                  <option value="file">File</option>
                  <option value="wysiwyg">Wysiwyg Editor</option>
                  <option value="oembed">oEmbed 1</option>
                  <option value="null">Gallery</option>
                </optgroup>
                <optgroup label="Choice">
                  <option value="select">Select</option>
                  <option value="checkbox">Checkbox</option>
                  <option value="radio">Radio Button</option>
                  <option value="button_group">Button Group</option>
                  <option value="true_false">True / False</option>
                </optgroup>
                <optgroup label="Relational">
                  <option value="link">Link</option>
                  <option value="post_object">Post Object</option>
                  <option value="page_link">Page Link</option>
                  <option value="relationship">Relationship</option>
                  <option value="taxonomy">Taxonomy</option>
                  <option value="user">User</option>
                </optgroup>
                <optgroup label="Widgetsa">
                  <option value="google_map">Google Map</option>
                  <option value="date_picker">Date Picker</option>
                  <option value="date_time_picker">Date Time Picker</option>
                  <option value="time_picker">Time Picker</option>
                  <option value="color_picker">Color Picker</option>
                </optgroup>
                <optgroup label="Layout">
                  <option value="message">Message</option>
                  <option value="accordion">Accordion</option>
                  <option value="tab">Tab</option>
                  <option value="group">Group</option>
                  <option value="repeater">Repeater</option>
                  <option value="flexible">Flexible Content</option>
                  <option value="clone">Clone</option>
                </optgroup>
              </select>
            </div>
          </div>
          <div class="row mb-3">
            <label for="input-label" class="col-sm-2 col-form-label">Label</label>
            <div class="col-sm-10 col-xl-8 col-xxl-6">
              <input type="text" class="form-control" placeholder="" name="field[1][label]" value="">
            </div>
          </div>

          <div class="row mb-3">
            <label for="input-name" class="col-sm-2 col-form-label">Name</label>
            <div class="col-sm-10 col-xl-8 col-xxl-6">
              <input type="text" class="form-control" placeholder="" name="field[1][name]" value="">
            </div>
          </div>

          <div class="row mb-3">
            <label for="input-default" class="col-sm-2 col-form-label">Default</label>
            <div class="col-sm-10 col-xl-8 col-xxl-6">
              <input type="text" class="form-control" placeholder="" name="field[1][default]" value="">
            </div>
          </div>


        </div>

        <div class="tab-pane" id="field-id-1-local" role="tabpanel" aria-labelledby="local-tab">

          <div class="row mb-3">
            <label for="input-default" class="col-sm-2 col-form-label">Required</label>
            <div class="col-sm-10 col-xl-8 col-xxl-6">

              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" id="field-id-1-flexSwitchCheckDefault">
                <label class="form-check-label" for="flexSwitchCheckDefault"></label>
              </div>

            </div>
          </div>


          <div class="row mb-3">
            <label for="input-max_length" class="col-sm-2 col-form-label">Max Length</label>
            <div class="col-sm-10 col-xl-8 col-xxl-6">
              <input type="number" class="form-control" placeholder="" name="field[1][max_length]" value="">
            </div>
          </div>

        </div>

        <div class="tab-pane" id="field-id-1-media" role="tabpanel" aria-labelledby="media-tab">
          media
        </div>


        <div class="tab-pane" id="field-id-1-comments" role="tabpanel" aria-labelledby="comments-tab">
          comments
        </div>

        <div class="tab-pane" id="field-id-1-orders" role="tabpanel" aria-labelledby="orders-tab">
          orders
        </div>

      </div>

    </div>
  </div>

</div>