> For the complete documentation index, see [llms.txt](https://cedrus.gitbook.io/project-fusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cedrus.gitbook.io/project-fusion/components/form-controls/input.md).

# Input

#### cf-input

Input component is based on Angular Material input and has such extended options:

* prefix;
* suffix;
* icon;
* menu;
* notification.

### Usage

app.html

```markup
<md-grid-list cols="3" rows="2" rowHeight="150px">
    <md-grid-tile>
        <cf-input></cf-input>
    </md-grid-tile>
    <md-grid-tile>
        <cf-input [properties]="input2" [styling]="inputStyling2" [notification]="myNotifications"></cf-input>
    </md-grid-tile>
    <md-grid-tile>
        <cf-button md-raised-button [properties]="sender" (click)="sendMessage()"></cf-button>
    </md-grid-tile>
    <md-grid-tile>
        <span (click)="warning()">
            <cf-input [properties]="input4" [styling]="inputStyling4"></cf-input>
        </span>
    </md-grid-tile>
    <md-grid-tile>
        <cf-input [properties]="input3"></cf-input>
    </md-grid-tile>
    <md-grid-tile>
        <cf-input [properties]="input5"></cf-input>
    </md-grid-tile>
</md-grid-list>
```

app.ts

```typescript
input2= new InputModel ({
    type : "text",        
    placeholder: " amount( USD )",
    prefix : "$",
    iconProperty: new IconModel ({        
        name: "fa-usd",
        size: "20px"
    }),
    iconPosition:"left"
});

inputStyling2 = new InputStylingModel({
    input:{
        class:"redInput"
    },
    iconStyling: new IconStylingModel ({
        icon: {
            class: "redInput"
        }
    })
});

input3= new InputModel ( {
    type : "text",        
    placeholder: "Accent",
    dividerColor : "accent",
    menu: new MenuModel({
        menuItems:[
        {
            buttonProperty: new ButtonModel({
                label: 'Menu item 1',
                icon: new IconModel ({
                    name: 'fa-apple',
                    size: '24px'
                })
            }),
            divider: true,
            notification: '7',
            display: true,
            disable: false,
            onClick: this.clickFunc.bind(this)
        },
        {
            buttonProperty: new ButtonModel({
                label: 'Menu item 2',
                icon: new IconModel ({
                    name: 'thumb_up',
                    size: '24px'
                })
            }),
            notification: '',
            onClick: this.clickFunc.bind(this)
        }
    ]})
});

input4= new InputModel ({
    type : "text",        
    placeholder: "Warning",
    dividerColor : "warn",
    iconProperty: new IconModel ({        
        name: "fa-exclamation-triangle",
        size: "20px"
    }),
    iconPosition:"right"
});
inputStyling4 = new InputStylingModel({
    iconStyling: new IconStylingModel ({
        icon: {
            class: "orangeIcon"
        }
    })
});

input5= new InputModel ({
    type : "password",        
    placeholder: "password",
    maxlength : "10",
    hint : {
        text : "from 1 to 10 chars",
        align : "start"
    }
});

clickFunc(menuItem: MenuItemModel): void {
    this.input3.value = menuItem.buttonProperty.label;
}

letters = 0;
  myNotifications: NotificationModel = {
    value: this.letters
  };
  sender = new ButtonModel({
    label: "Send mail",
    icon: null,
    icon_position:"right"
  });
  sendMessage() { ++this.myNotifications.value; }

warning (): void {
    alert ("Warning!!!");
}
```

app.scss

```css
p {
    margin-right: 16px;
}

cf-input {
    margin: 10px;
}

/deep/ {
    .redInput {
    color: red;
    }
    .orangeIcon {
    color: orange;
    }
}
```

## Input properties

|     Attr     |       |    Type   | Details                                                    |
| :----------: | :---: | :-------: | ---------------------------------------------------------- |
|     type     |       |   string  | It is the type of the input. Default: text.                |
|  placeholder |       |   string  | It is the placeholder of the input                         |
|     hint     |       |   object  | Message to be shown under input field                      |
|              |  text |   string  | Text for hint                                              |
|              | align |   string  | Hint text alignment. Can be: start or end. Default: start. |
|    prefix    |       |   string  | It is the prefix of the input                              |
|    suffix    |       |   string  | It is the suffix of the input                              |
| dividerColor |       |   string  | It is the deviderColor of the input                        |
|     value    |       |    any    | It is the value of the input                               |
|   maxlength  |       |   number  | It is input maxlength                                      |
| iconProperty |       | IconModel | It is the icon object on the input                         |
|     menu     |       | MenuModel | The menu object on the input                               |

## Input styling properties

|     Attr    |       Type       | Dateils                         |
| :---------: | :--------------: | ------------------------------- |
|  container  |   StylingModel   | Styling for the input container |
|    input    |   StylingModel   | Styling for the input itself    |
|     hint    |   StylingModel   | Styling for the hint            |
| iconStyling | IconStylingModel | Styling for the icon            |
| menuStyling | MenuStylingModel | Styling for the menu            |

## Input output properties

|     Attr    | Details                                                 |
| :---------: | ------------------------------------------------------- |
| valueChange | The event that will be called when the value is changed |