Input overview

NbInputDirective

Basic input directive.

<input nbInput></input>

Installation

Import NbInputModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbInputModule,
  ],
})
export class PageModule { }

Usage

Default input size is medium:

Inputs are available in multiple colors using status property:

There are three input sizes:

Inputs available in different shapes, which could be combined with the other properties:

nbInput could be applied to the following selectors - input, textarea:

You can add fullWidth attribute to make element fill container:

Or you can bind control with form controls or ngModel:

Use <nb-form-field> to add custom content to the input field. First import NbFormFieldModule. Then put the input field and custom content into <nb-form-field> and add nbPrefix or nbSuffix directive to the custom content. nbPrefix puts content before input and nbSuffix after.