ngx-admin/src/app/pages/forms/form-inputs/form-inputs.component.html

<div class="row">
  <div class="col-md-6">
    <nb-card>
      <nb-card-header>Default Inputs</nb-card-header>
      <nb-card-body>
        <div class="input-group">
          <input type="text" placeholder="Project" class="form-control"/>
        </div>
        <div class="row full-name-inputs">
          <div class="col-sm-6 input-group">
            <input type="text" placeholder="Nick" class="form-control"/>
          </div>
          <div class="col-sm-6 input-group">
            <input type="text" placeholder="Last Name" class="form-control"/>
          </div>
        </div>
        <div class="input-group">
          <input type="password" placeholder="Password" class="form-control"/>
        </div>
        <div class="input-group has-person-icon">
          <input type="text" placeholder="With Icon" class="form-control"/>
        </div>
        <div class="input-group input-group-rounded">
          <input type="text" placeholder="Rounded border" class="form-control"/>
        </div>
        <div class="form-group">
          <input type="text" placeholder="Project" class="form-control"/>
          <small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.
          </small>
        </div>
        <div class="input-group">
          <input type="text" placeholder="Disabled input" class="form-control" disabled/>
        </div>
        <div class="input-group">
          <textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
        </div>
        <div class="input-group input-group-sm">
          <input type="text" placeholder="Small Input" class="form-control"/>
        </div>
        <div class="input-group input-group-lg">
          <input type="text" placeholder="Large Input" class="form-control"/>
        </div>
      </nb-card-body>
    </nb-card>

    <nb-card>
      <nb-card-header>Input Groups</nb-card-header>
      <nb-card-body>
        <div class="input-group">
          <span class="input-group-addon success">@</span>
          <input type="text" class="form-control" placeholder="Username"/>
        </div>
        <div class="input-group mail-btn-group">
          <span class="input-group-btn">
            <button class="btn btn-primary btn-icon">
              <i class="ion-ios-email-outline"></i>
            </button>
          </span>
          <input type="text" class="form-control" placeholder="Recipient's username">
          <span class="input-group-btn">
            <button class="btn btn-primary">
              @example.com
            </button>
          </span>
        </div>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for...">
          <span class="input-group-btn">
            <button class="btn btn-danger">
              Search
            </button>
          </span>
        </div>
        <div class="input-group">
          <div class="input-group-btn" ngbDropdown>
            <button type="button" class="btn btn-success dropdown-toggle" ngbDropdownToggle>
              Action
            </button>
            <ul class="dropdown-menu">
              <li class="dropdown-item">Action</li>
              <li class="dropdown-item">Another action</li>
              <li class="dropdown-item">Something else here</li>
              <div role="separator" class="dropdown-divider"></div>
              <li class="dropdown-item">Separated link</li>
            </ul>
          </div>
          <input type="text" class="form-control">
        </div>
      </nb-card-body>
    </nb-card>

    <nb-card>
      <nb-card-header>Selects</nb-card-header>
      <nb-card-body>
        <div class="form-group">
          <label>Simple Select</label>
          <select class="form-control">
            <option>Minsk</option>
            <option>Gomel</option>
            <option>Brest</option>
            <option>Grodno</option>
            <option>Mogilev</option>
          </select>
        </div>
        <div class="form-group">
          <label>Multiple Select</label>
          <select multiple class="form-control">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
            <option>Item 4</option>
            <option>Item 5</option>
          </select>
        </div>
      </nb-card-body>
    </nb-card>
  </div>

  <div class="col-md-6">
    <nb-card>
      <nb-card-header>Input Styles</nb-card-header>
      <nb-card-body>
        <div class="input-group input-group-border-only">
          <input type="text" placeholder="Border Only" class="form-control"/>
        </div>
        <div class="input-group">
          <input type="text" placeholder="Default Input" class="form-control">
        </div>
        <div class="input-group input-group-fill-only">
          <input type="text" placeholder="Fill Only" class="form-control">
        </div>
      </nb-card-body>
    </nb-card>

    <nb-card>
      <nb-card-header>Validation States</nb-card-header>
      <nb-card-body>
        <div class="form-group">
          <input type="text" placeholder="Input with Success" class="form-control form-control-success">
        </div>
        <div class="form-group">
          <input type="text" placeholder="Input with Warning" class="form-control form-control-warning">
        </div>
        <div class="form-group">
          <input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
        </div>
        <div class="form-group validation-checkboxes row">
          <nb-checkbox status="success" class="col-sm-4">Checkbox with Success</nb-checkbox>
          <nb-checkbox status="warning" class="col-sm-4">Checkbox with Warning</nb-checkbox>
          <nb-checkbox status="danger" class="col-sm-4">Checkbox with Danger</nb-checkbox>
        </div>
        <div class="form-group has-success">
          <input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
        </div>
        <div class="form-group has-warning">
          <input type="text" placeholder="Input with Warning Icon" class="form-control form-control-warning">
        </div>
        <div class="form-group has-danger">
          <input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger">
        </div>
      </nb-card-body>
    </nb-card>

    <nb-card>
      <nb-card-header>Checkboxes & Radios</nb-card-header>
      <nb-card-body>
        <div class="row demo-checkboxes-radio">
          <div class="demo-checkboxes col-sm-4">
            <nb-checkbox>Checkbox 1</nb-checkbox>
            <nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
            <label class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Bootstrap Checkbox</span>
            </label>
          </div>
          <div class="demo-radio col-sm-4">
            <label class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" name="customRadio">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Radio 1</span>
            </label>
            <label class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" name="customRadio" checked>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Radio 2</span>
            </label>
            <label class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" name="customRadio">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Radio 3</span>
            </label>
          </div>
          <div class="demo-disabled-checkbox-radio col-sm-4">
            <nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
            <label class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" disabled>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Disabled Radio</span>
            </label>
          </div>
        </div>
      </nb-card-body>
    </nb-card>

    <nb-card>
      <nb-card-body class="demo-rating">
        <span class="rating-header">Rating</span>
        <div>
          <ngb-rating [(rate)]="starRate" max=5>
            <ng-template let-fill="fill">
              <span class="star fill" [class.filled]="fill === 100">
                <i class="ion-android-star" *ngIf="fill === 100"></i>
                <i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
              </span>
            </ng-template>
          </ngb-rating>
          <span class="current-rate">{{ starRate }}</span>
        </div>
        <div>
          <ngb-rating [(rate)]="heartRate" max=5>
            <ng-template let-fill="fill">
              <span class="star fill" [class.filled]="fill === 100">
                <i class="ion-ios-heart" *ngIf="fill === 100"></i>
                <i class="ion-ios-heart-outline" *ngIf="fill !== 100"></i>
              </span>
            </ng-template>
          </ngb-rating>
          <span class="current-rate">{{ heartRate }}</span>
        </div>
      </nb-card-body>
    </nb-card>
  </div>
</div>