Skip to main content

IInput

View source on GitHub

Input field for single-line strings.

inputinput

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​

PropertyTypeDescription
valuestringDefines the input value.
onChange(value: string) => void | IMessageSets 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?stringDefines the input HTML "name" property.
placeholder?stringDefines the input placeholder text.
maxLength?stringDefines the default maximum length of the input value.
size?InputSizeDefines the input size.
isAutoFocused?booleanSpecifies whether to focus the input field when initially rendered.
isReadOnly?booleanSpecifies whether the input field displays the read-only content.
hasError?booleanSpecifies whether to indicate that there is an error in the input field.
hasWarning?booleanSpecifies whether to indicate that there is a warning in the input field.
scale?booleanSpecifies if the input field is scaled or not.
autoComplete?InputAutocompleteDefines the input HTML "autocomplete" property.
tabIndex?numberDefines the input HTML "tabindex" property.
mask?[]Defines the input text mask.
isDisabled?booleanSpecifies that the field cannot be used (e.g the user is not authorized, or the changes are not saved).
type?InputTypeThe input field type.
keepCharPositions?booleanSpecifies whether the characters are allowed to be added or deleted without changing the positions of the existing characters.
onBlur?(value: string) => void | IMessageSets a function which is triggered whenever the input field is blurred.
onFocus?(value: string) => void | IMessageSets a function which is triggered whenever the input field is focused.
children?Node | Node[]Defines the input field components.
iconSize?numberDefines the input icon size.
iconName?stringDefines the path to the input icon.
isIconFill?booleanSpecifies if the icon fill is needed or not.
iconColor?stringDefines the input icon color.
hoverColor?stringDefines the icon color on hover action.
iconButtonClassName?stringDefines the class name of the icon button.
onIconClick?() => voidSets a function which is triggered whenever the input icon is clicked.
className?stringDefines the CSS class for styling the component. Can be used to override or extend the default component styles.

InputSize​

View source on GitHub

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​

View source on GitHub

The input autocomplete feature.

Enumeration Members​

on​

on: "on";

Autocomplete is enabled.

off​

off: "off";

Autocomplete is disabled.

InputType​

View source on GitHub

The supported input types.

Enumeration Members​

text​

text: "text";

Text input type.

password​

password: "password";

Password input type.