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

<div class="row">
  <div class="col-lg-6">
    <nb-card>
      <nb-card-header>Default Inputs</nb-card-header>
      <nb-card-body>
        <div class="input-group">
          <input type="text" nbInput fullWidth placeholder="Project">
        </div>
        <div class="row full-name-inputs">
          <div class="col-sm-6 input-group">
            <input type="text" nbInput fullWidth placeholder="Nick">
          </div>
          <div class="col-sm-6 input-group">
            <input type="text" nbInput fullWidth placeholder="Last Name">
          </div>
        </div>
        <div class="input-group">
          <input type="password" nbInput fullWidth placeholder="Password">
        </div>
        <div class="input-group has-person-icon">
          <input type="text" placeholder="With Icon" class="form-control"/>
        </div>
        <div class="input-group">
          <input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
        </div>
        <div class="input-group">
          <input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
        </div>
        <div class="input-group">
          <input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
        </div>
        <div class="input-group">
          <input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
        </div>
        <div class="input-group">
          <textarea rows="5" nbInput fullWidth shape="round"  placeholder="Text Area"></textarea>
        </div>
        <div class="input-group input-group-sm">
          <input type="text" nbInput fullWidth fieldSize="small"  placeholder="Small Input">
        </div>
        <div class="input-group input-group-lg">
          <input type="text" nbInput fullWidth fieldSize="medium"  placeholder="Medium Input">
        </div>
        <div class="input-group input-group-lg">
          <input type="text" nbInput fullWidth fieldSize="large"  placeholder="Large Input">
        </div>
      </nb-card-body>
    </nb-card>
  </div>

  <div class="col-lg-6">
    <nb-card>
      <nb-card-header>Validation States</nb-card-header>
      <nb-card-body>
        <div class="form-group">
          <input type="text" nbInput fullWidth status="info"  placeholder="Input with Info">
        </div>
        <div class="form-group">
          <input type="text" nbInput fullWidth status="success"  placeholder="Input with Warning">
        </div>
        <div class="form-group">
          <input type="text" nbInput fullWidth status="warning"  placeholder="Input with Danger">
        </div>
        <div class="form-group">
          <input type="text" nbInput fullWidth status="danger" placeholder="Input with 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>
      </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>
          </div>
          <div class="demo-radio col-sm-4">
            <nb-radio-group [(value)]="radioGroupValue">
              <nb-radio
                [value]="'This is value 1'">
                Radio 1
              </nb-radio>
              <nb-radio
                [value]="'This is value 2'">
                Radio 2
              </nb-radio>
              <nb-radio
                [value]="'This is value 3'">
                Radio 3
              </nb-radio>
            </nb-radio-group>
          </div>
          <div class="demo-disabled-checkbox-radio col-sm-4">
            <nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
            <nb-radio-group disabled>
              <nb-radio
                [value]="'Disabled Value'">
                Disabled Radio
              </nb-radio>
            </nb-radio-group>
          </div>
        </div>
      </nb-card-body>
    </nb-card>
  </div>
</div>