## 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 shown below the field, next to the status icon.
- 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
]} />
, ]}
/>
Suffix,
,
,
]}
/>
,
]}
/>
;
```
### Type
- description: Control an acceptable value format with the \`type\` prop. This component accepts all [native HTML types](https://www.w3schools.com/html/html_form_input_types.asp).
- 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
|
|
|
,
]}
/>
|
;
```