form-select.component.html

<app-page-header
  title="Form Select"
  title1="Form Select"
  activeitem="Forms"
></app-page-header>

<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-6">
  <div class="col-span-12 md:col-span-6 xl:!col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Default Select</h5>
      </div>
      <div class="box-body">
        <ng-select class="ti-form-select" placeholder="Select">
          <ng-option selected>Open this select menu</ng-option>
          <ng-option>1</ng-option>
          <ng-option>2</ng-option>
          <ng-option>3</ng-option>
        </ng-select>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xl:!col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Pilled Select</h5>
      </div>
      <div class="box-body">
        <ng-select class="ti-form-select rounded-full" placeholder="Select">
          <ng-option selected>Open this select menu</ng-option>
          <ng-option>1</ng-option>
          <ng-option>2</ng-option>
          <ng-option>3</ng-option>
        </ng-select>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xl:!col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Disabled Select</h5>
      </div>
      <div class="box-body">
        <ng-select
          class="opacity-70 pointer-events-none ti-form-select"
          disabled
          placeholder="Select"
        >
          <ng-option selected>Open this select menu</ng-option>
          <ng-option>1</ng-option>
          <ng-option>2</ng-option>
          <ng-option>3</ng-option>
        </ng-select>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xl:!col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Select With Hidden Label</h5>
      </div>
      <div class="box-body">
        <label for="hs-hidden-select" class="sr-only">Label</label>
        <ng-select
          id="hs-hidden-select"
          class="ti-form-select"
          placeholder="Select"
        >
          <ng-option selected>Open this select menu</ng-option>
          <ng-option>1</ng-option>
          <ng-option>2</ng-option>
          <ng-option>3</ng-option>
        </ng-select>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->

<!-- Start::row-2 -->
<div class="grid grid-cols-12 gap-x-6">
  <div class="col-span-12 md:col-span-6 xl:!col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Select With Label</h5>
      </div>
      <div class="box-body">
        <label for="hs-select-label" class="ti-form-select-label">Label</label>
        <ng-select
          id="hs-select-label"
          class="ti-form-select"
          placeholder="Select"
        >
          <ng-option selected>Open this select menu</ng-option>
          <ng-option>1</ng-option>
          <ng-option>2</ng-option>
          <ng-option>3</ng-option>
        </ng-select>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xl:!col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Select Sizes</h5>
      </div>
      <div class="box-body">
        <div class="space-y-3">
          <ng-select class="py-2 px-3 ti-form-select" placeholder="Select">
            <ng-option selected>Open this select menu</ng-option>
            <ng-option>1</ng-option>
            <ng-option>2</ng-option>
            <ng-option>3</ng-option>
          </ng-select>

          <ng-select class="ti-form-select sm:p-4" placeholder="Select">
            <ng-option selected>Open this select menu</ng-option>
            <ng-option>1</ng-option>
            <ng-option>2</ng-option>
            <ng-option>3</ng-option>
          </ng-select>

          <ng-select class="ti-form-select sm:p-5" placeholder="Select">
            <ng-option selected>Open this select menu</ng-option>
            <ng-option>1</ng-option>
            <ng-option>2</ng-option>
            <ng-option>3</ng-option>
          </ng-select>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 xl:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Select With Validation States</h5>
      </div>
      <div class="box-body">
        <div class="space-y-3">
          <div>
            <label for="select-1" class="ti-form-select-label">Label</label>
            <div class="relative">
              <ng-select
                id="select-1"
                class="ti-form-select ltr:pr-16 rtl:pl-16 border-red-500 focus:border-red-500 focus:ring-red-500"
                placeholder="Select"
              >
                <ng-option selected>Open this select menu</ng-option>
                <ng-option>1</ng-option>
                <ng-option>2</ng-option>
                <ng-option>3</ng-option>
              </ng-select>
              <div
                class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-8 rtl:pl-8"
              >
                <svg
                  class="h-4 w-4 text-red-500"
                  width="16"
                  height="16"
                  fill="currentColor"
                  viewBox="0 0 16 16"
                  aria-hidden="true"
                >
                  <path
                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
                  />
                </svg>
              </div>
            </div>
            <p class="text-sm text-red-600 mt-2">
              Please select a valid state.
            </p>
          </div>

          <div>
            <label for="select-2" class="ti-form-select-label">Label</label>
            <div class="relative">
              <ng-select
                id="select-2"
                class="ti-form-select ltr:pr-16 rtl:pl-16 border-green-500 focus:border-green-500 focus:ring-green-500"
                placeholder="Select"
              >
                <ng-option>Open this select menu</ng-option>
                <ng-option selected>1</ng-option>
                <ng-option>2</ng-option>
                <ng-option>3</ng-option>
              </ng-select>
              <div
                class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-8 rtl:pl-8"
              >
                <svg
                  class="h-4 w-4 text-green-500"
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M13.6091 3.41829C13.8594 3.68621 14 4.04952 14 4.42835C14 4.80718 13.8594 5.1705 13.6091 5.43841L6.93313 12.5817C6.68275 12.8495 6.3432 13 5.98916 13C5.63511 13 5.29556 12.8495 5.04518 12.5817L2.3748 9.72439C2.13159 9.45494 1.99701 9.09406 2.00005 8.71947C2.00309 8.34488 2.14351 7.98656 2.39107 7.72167C2.63862 7.45679 2.9735 7.30654 3.32359 7.30328C3.67367 7.30002 4.01094 7.44403 4.26276 7.70427L5.98916 9.55152L11.7211 3.41829C11.9715 3.15046 12.3111 3 12.6651 3C13.0191 3 13.3587 3.15046 13.6091 3.41829Z"
                    fill="currentColor"
                  />
                </svg>
              </div>
            </div>
            <p class="text-sm text-green-600 mt-2">Looks good!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-2 -->

<!-- Start::row-3 -->
<div class="grid grid-cols-12 gap-x-6">
  <div class="col-span-12 md:col-span-6 xl:!col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Tom Select Input</h5>
      </div>
      <div class="box-body">
        <ng-select
          [items]="[]"
          class="ti-input"
          id="input-tags"
          class="w-full rounded"
          placeholder="Enter the Text"
          [addTag]="true"
          [multiple]="true"
          [selectOnTab]="true"
          [isOpen]="false"
        >
        </ng-select>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xl:!col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Basic Tom Select</h5>
      </div>
      <div class="box-body">
        <ng-select
          class="ti-form-select !p-0"
          id="select-beast"
          autocomplete="off"
          placeholder="Select"
        >
          <ng-option value="">Select a person...</ng-option>
          <ng-option value="4">Thomas Edison</ng-option>
          <ng-option value="1">Nikola</ng-option>
          <ng-option value="3">Nikola Tesla</ng-option>
          <ng-option value="5">Arnold Schwarzenegger</ng-option>
        </ng-select>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xl:!col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Disabled Tom Select</h5>
      </div>
      <div class="box-body">
        <ng-select
          class="ti-form-select pointer-events-none !p-0"
          id="select-beast-disabled"
          autocomplete="off"
          disabled
          placeholder="Select"
        >
          <ng-option value="">Select a person...</ng-option>
          <ng-option value="4">Thomas Edison</ng-option>
          <ng-option value="1">Nikola</ng-option>
          <ng-option value="3" selected>Nikola Tesla</ng-option>
        </ng-select>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xl:!col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Multiple Tom Select</h5>
      </div>
      <div class="box-body">
        <ng-select
          class="w-full rounded"
          placeholder="Enter the Text"
          [items]="companies"
          [addTag]="addTagFn"
          [hideSelected]="true"
          [multiple]="true"
          bindLabel="name"
          [(ngModel)]="selectedCompanies"
        >
        </ng-select>
      </div>
    </div>
  </div>
</div>
<!-- End::row-3 -->

<!-- Start::row-4 -->
<div class="grid grid-cols-12 gap-x-6">
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Choices Multiple Select</h5>
      </div>
      <div class="box-body">
        <label class="ti-form-select-label">Default Choices Select</label>
        <ng-select
          [items]="choices"
          [multiple]="true"
          [closeOnSelect]="false"
          [hideSelected]="true"
          bindLabel="name"
          placeholder="Select people"
          [(ngModel)]="selectedChoices"
        >
        </ng-select>

        <label class="ti-form-select-label my-2">With Remove Button</label>
        <ng-select
          [items]="choices2"
          [multiple]="true"
          [closeOnSelect]="false"
          [hideSelected]="true"
          bindLabel="name"
          placeholder="Select people"
          [(ngModel)]="selectedChoices2"
        >
        </ng-select>

        <label class="ti-form-select-label mt-2">Option groups</label>
       <ng-select [items]="accounts"
           bindLabel="name"
           bindValue="name"
           placeholder="Select city"
           groupBy="country"
           [(ngModel)]="selectedAccount">
    <ng-template ng-optgroup-tmp let-item="item">
        {{item.country || 'Unnamed group'}}
    </ng-template>
</ng-select>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Single Select</h5>
      </div>
      <div class="box-body">
        <label class="ti-form-select-label"
          >Default Single Choices Select</label
        >

        <ng-select
          class="ti-form-select focus:ring-transparent focus:border-transparent"
          data-trigger
          name="choices-single-default"
          id="choices-single-default"
          placeholder="Select"
        >
          <ng-option value="">This is a placeholder</ng-option>
          <ng-option value="Choice 1">Choice 1</ng-option>
          <ng-option value="Choice 2">Choice 2</ng-option>
          <ng-option value="Choice 3">Choice 3</ng-option>
        </ng-select>
        <label class="ti-form-select-label mt-2">Option groups</label>
        <ng-select
          [items]="multiSelect"
          bindLabel="name"
          bindValue="name"
          [groupBy]="groupByFn"
          [groupValue]="groupValueFn"
          [multiple]="true"
          [(ngModel)]="multiSelectSelected"
          name="multiSelectSelected"
        >
          <ng-template ng-optgroup-tmp let-item="item">
            <span style="vertical-align: middle">{{ item.name }}</span>
            <span class="ml-1 badge badge-secondary">{{ item.total }}</span>
          </ng-template>
        </ng-select>
      </div>
    </div>
  </div>
</div>
<!-- End::row-4 -->

<!-- Start::row-5 -->
<div class="grid grid-cols-12 gap-x-6">
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Passing Through Options</h5>
      </div>
      <div class="box-body">
        <ng-select [items]="accounts"
         class="ti-form-input"
          id="choices-text-preset-values"
           bindLabel="name"
           bindValue="name"
           placeholder="Select Country"
           [groupBy]="groupByFn"
           [groupValue]="groupValueFn"
           [multiple]="true"
           [(ngModel)]="selectedAccount">
    <ng-template ng-optgroup-tmp let-item="item">
        <span style="vertical-align: middle;">{{item.name}}</span>
        <span class="ml-1 badge badge-secondary">{{item.total}}</span>
    </ng-template>
</ng-select>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Email Address Only</h5>
      </div>
      <div class="box-body">
        <input
          class="ti-form-input"
          id="choices-text-email-filter"
          placeholder="type here..."
          type="text"
        />
      </div>
    </div>
  </div>
</div>
<!-- End::row-5 -->

<!-- Start::row-6 -->
<div class="grid grid-cols-12 gap-x-6">
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Options added via config with no search</h5>
      </div>
      <div class="box-body">
        <ng-select
          class="ti-form-select"
          name="choices-single-no-search"
          id="choices-single-no-search"
          placeholder="Select"
        >
          <ng-option value="0">Zero</ng-option>
          <ng-option value="0">One</ng-option>
          <ng-option value="0">Two</ng-option>
          <ng-option value="0">Three</ng-option>
        </ng-select>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Passing Unique Values</h5>
      </div>
      <div class="box-body">
        <ng-select [items]="[]"
           [addTag]="true"
           placeholder="Type value"
           [multiple]="true"
           [selectOnTab]="true"
           [isOpen]="false">
</ng-select>
      </div>
    </div>
  </div>
</div>
<!-- End::row-6 -->