## Feature Examples
### Status
- description: Control component status using `status` prop. It supports two states:
- `error` - use it to highlight an invalid value
- `warning` - use it to highlight a value that impacts user business or can’t be validated
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
_statusMessage
```
### 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
]} />
, ]}
/>
Suffix,
,
,
]}
/>
,
]}
/>
;
```
### Type
- description: Control an acceptable value format with the `type` prop. This component accepts all native HTML types.
- 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:
- `default` - use in all common cases.
- `bottomLine` - use as a title which can be edited on the click.
- 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
Card Details
|
|
|
,
]}
/>
|
;
```