2019-11-21 13:32:40 +00:00
|
|
|
|
# TextInput
|
2019-05-21 13:40:24 +00:00
|
|
|
|
|
2019-11-21 13:32:40 +00:00
|
|
|
|
Input field for single-line strings
|
|
|
|
|
|
|
|
|
|
### Usage
|
2019-05-21 13:40:24 +00:00
|
|
|
|
|
|
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
|
import TextInput from "@appserver/components/text-input";
|
2019-05-21 13:40:24 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```js
|
2019-11-21 13:32:40 +00:00
|
|
|
|
const mask = [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/];
|
2019-05-21 13:40:24 +00:00
|
|
|
|
```
|
|
|
|
|
|
2019-11-21 13:32:40 +00:00
|
|
|
|
```jsx
|
|
|
|
|
<TextInput
|
|
|
|
|
mask={mask}
|
|
|
|
|
value="text"
|
2020-10-16 13:16:01 +00:00
|
|
|
|
onChange={(event) => alert(event.target.value)}
|
2019-11-21 13:32:40 +00:00
|
|
|
|
/>
|
|
|
|
|
```
|
2019-05-21 13:40:24 +00:00
|
|
|
|
|
2019-11-21 13:32:40 +00:00
|
|
|
|
### Properties
|
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
|
| ---------------- | :----------------: | :------: | :--------------------------------------: | :-----: | ------------------------------------------------------------------------------------------------------ |
|
|
|
|
|
| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property |
|
|
|
|
|
| `className` | `string` | - | - | - | Accepts class |
|
|
|
|
|
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
|
|
|
|
|
| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning |
|
|
|
|
|
| `id` | `string` | - | - | - | Used as HTML `id` property |
|
|
|
|
|
| `isAutoFocussed` | `bool` | - | - | - | Focus the input field on initial render |
|
|
|
|
|
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used (e.g not authorised, or changes not saved) |
|
|
|
|
|
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
|
|
|
|
|
| `mask` | `array` | - | - | - | input text mask |
|
|
|
|
|
| `name` | `string` | - | - | - | Used as HTML `name` property |
|
|
|
|
|
| `onBlur` | `func` | - | - | - | Called when field is blurred |
|
|
|
|
|
| `onChange` | `func` | - | - | - | Called with the new value. Required when input is not read only. Parent should pass it back as `value` |
|
|
|
|
|
| `onFocus` | `func` | - | - | - | Called when field is focused |
|
|
|
|
|
| `placeholder` | `string` | - | - | - | Placeholder text for the input |
|
|
|
|
|
| `scale` | `bool` | - | - | - | Indicates the input field has scale |
|
|
|
|
|
| `size` | `string` | | `base`, `middle`, `big`, `huge`, `large` | `base` | Supported size of the input fields. |
|
|
|
|
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
|
|
|
|
| `type` | `string` | | `text`, `password` | `text` | Supported type of the input fields. |
|
|
|
|
|
| `value` | `string` | ✅ | - | - | Value of the input |
|
|
|
|
|
| `withBorder` | `bool` | - | - | `true` | Indicates that component contain border |
|
|
|
|
|
| `fontWeight` | `number`, `string` | - | - | - | Sets the font weight |
|
|
|
|
|
| `isBold` | `bool` | - | - | `false` | Sets font weight value to 600 |
|