InputBlock
InputBlock description
Usage
import InputBlock from "@appserver/components/input-block";
const mask = [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/];
<InputBlock
mask={mask}
iconName={"static/images/search.react.svg"}
onIconClick={(event) => alert(event.target.value)}
onChange={(event) => alert(event.target.value)}
>
<Button
size="base"
isDisabled={false}
onClick={() => alert("Button clicked")}
label="OK"
/>
</InputBlock>
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 |
iconColor |
string |
- |
- |
black |
Specifies the icon color |
iconName |
string |
- |
- |
- |
Specifies the icon name |
iconSize |
number |
✅ |
- |
- |
Size icon |
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) |
isIconFill |
bool |
- |
- |
false |
Determines if icon fill is needed |
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 |
onIconClick |
func |
✅ |
- |
- |
Will be triggered whenever an icon is clicked |
placeholder |
string |
- |
- |
- |
Placeholder text for the input |
scale |
bool |
- |
- |
- |
Indicates the input field has scale |
size |
string |
- |
base , middle , big , huge |
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 |