@wix/design-system
Version:
@wix/design-system
79 lines (50 loc) • 1.85 kB
Markdown
## Feature Examples
### Status
- description: Control component status using `status` prop. It supports two states:<br/>
 - `error` - use it to highlight an invalid value<br/>
 - `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/>
 - `default` - use in all common cases.<br/>
 - `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
```