IInput

Input field for single-line strings.

Examples

Search input with icon and hover effects

const searchInput: IInput = {
  value: "",
  onChange: (value) => {
    return {
      actions: [Actions.updateProps],
      newProps: {
        value
      }
    };
  },
  placeholder: "Search documents...",
  size: InputSize.middle,
  iconName: "search",
  iconSize: 16,
  iconColor: "#666666",
  hoverColor: "#333333",
  isIconFill: true,
}

Password input with validation and error handling

const passwordInput: IInput = {
  value: "",
  type: InputType.password,
  onChange: (value) => {
    const hasError = value.length < 8;
    return {
      actions: [Actions.updateProps],
      newProps: {
        value,
        hasError
      }
    };
  },
  onBlur: (value) => {
    if (value.length < 8) {
      return {
        actions: [Actions.showToast],
        toastProps: [{
          title: "Password must be at least 8 characters long",
          type: ToastType.error
        }]
      };
    }
  },
  placeholder: "Enter password",
  name: "password",
  autoComplete: InputAutocomplete.off,
  size: InputSize.big,
  isAutoFocused: true,
  hasError: false,
  maxLength: "32"
}

Properties

Property	Type	Description
value	string	Defines the input value.
onChange	(value: string) => void | IMessage	Sets a function which is triggered whenever the input value is changed. It is required when the input is not read-only. The changed input value is passed to the function, which passes it back in the "value" parameter.
name	string	Defines the input HTML "name" property.
placeholder	string	Defines the input placeholder text.
maxLength	string	Defines the default maximum length of the input value.
size	InputSize	Defines the input size.
isAutoFocused	boolean	Specifies whether to focus the input field when initially rendered.
isReadOnly	boolean	Specifies whether the input field displays the read-only content.
hasError	boolean	Specifies whether to indicate that there is an error in the input field.
hasWarning	boolean	Specifies whether to indicate that there is a warning in the input field.
scale	boolean	Specifies if the input field is scaled or not.
autoComplete	InputAutocomplete	Defines the input HTML "autocomplete" property.
tabIndex	number	Defines the input HTML "tabindex" property.
mask	[]	Defines the input text mask.
isDisabled	boolean	Specifies that the field cannot be used (e.g the user is not authorized, or the changes are not saved).
type	InputType	The input field type.
keepCharPositions	boolean	Specifies whether the characters are allowed to be added or deleted without changing the positions of the existing characters.
onBlur	(value: string) => void | IMessage	Sets a function which is triggered whenever the input field is blurred.
onFocus	(value: string) => void | IMessage	Sets a function which is triggered whenever the input field is focused.
children	Node | Node[]	Defines the input field components.
iconSize	number	Defines the input icon size.
iconName	string	Defines the path to the input icon.
isIconFill	boolean	Specifies if the icon fill is needed or not.
iconColor	string	Defines the input icon color.
hoverColor	string	Defines the icon color on hover action.
iconButtonClassName	string	Defines the class name of the icon button.
onIconClick	() => void	Sets a function which is triggered whenever the input icon is clicked.
className	string	Defines the CSS class for styling the component. Can be used to override or extend the default component styles.

InputSize

The supported input sizes.

Enumeration Members

base

base: "base";

Base size of the input field.

middle

middle: "middle";

Middle size of the input field.

big

big: "big";

Big size of the input field.

huge

huge: "huge";

Huge size of the input field.

large

large: "large";

Large size of the input field.

---

InputAutocomplete

The input autocomplete feature.

Enumeration Members

on

on: "on";

Autocomplete is enabled.

off

off: "off";

Autocomplete is disabled.

---

InputType

The supported input types.

Enumeration Members

text

text: "text";

Text input type.

password

password: "password";

Password input type.