## Feature Examples


### Status
- description: Control component status using `status` prop. It supports two states:<br/>
        &emsp;- `error` - use it to highlight an invalid value<br/>
        &emsp;- `warning` - use it to highlight a value that impacts user business or can’t be validated <br/>
        <br/>
        Explain the status with `statusMessage` prop.
- example: 
```jsx 

```

### Status Message
- description: Explain the status with `statusMessage` prop. The message is revealed when a user mouse hovers the status icon.
        The placement of a tooltip is controlled with `tooltipPlacement` prop.
- example: 
```jsx 

```

### Disabled
- description: Disable all input interactions with `disabled` prop. Use it to highlight unavailable functions.
- example: 
```jsx 

```

### Suffix
- description: Explain field values with additional information added to the `suffix` area.
        This prop accepts text, icons and even buttons. It accepts an array of objects as well.
- example: 
```jsx 

```

### Type
- description: Control an acceptable value format with the `type` prop. This component accepts all <a href="https://www.w3schools.com/html/html_form_input_types.asp">native HTML types</a>.
- example: 
```jsx 

```

### Max length
- description: Restrict the number of characters that can be entered into a field with the `maxLength` prop.
- example: 
```jsx 

```

### Bottom line border
- description: Style the component using `border` prop. It supports 2 styles:<br/>
        &emsp;- `default` - use in all common cases.<br/>
        &emsp;- `bottomLine` - use as a title which can be edited on the click.<br/>
- example: 
```jsx 

```




    


## Common Use Case Examples


### Checkout form
- description: This input with labels can only be used to build a Premium Checkout form.
- example: 
```jsx 

```