5.3 KiB
5.3 KiB
TextInput
Input field for single-line strings
Usage
import TextInput from "@appserver/components/text-input";
const mask = [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/];
<TextInput
mask={mask}
value="text"
onChange={(event) => alert(event.target.value)}
/>
Properties
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 |