@wix/design-system

### dataHook - type: string - description: Applies a data-hook HTML attribute that can be used in the tests ### className - type: string - description: Specifies a CSS class name to be appended to the component’s root element. - internal ### id - type: string - description: Assigns a unique identifier for the root element ### ariaControls - type: string - description: Associate a control with the regions that it controls ### ariaDescribedby - type: string - description: Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space. ### ariaLabel - type: string - description: Define a string that labels the current element in case where a text label is not visible on the screen ### autoFocus - type: boolean - description: Focus the element on mount (standard React input autoFocus) ### autoSelect - type: boolean - description: Automatically selects the entire input text ### autocomplete - type: string - description: Sets the value of native autocomplete attribute (check the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values ### defaultValue - type: string | number - description: Defines the initial value of an input ### disabled - type: boolean - description: Specifies whether input should be disabled or not ### status - type: "loading" | "error" | "warning" - description: Specify the status of a field ### statusMessage - type: ReactNode - description: Defines the message to display on status icon hover. If not given or empty there will be no tooltip. ### hideStatusSuffix - type: boolean - description: Specifies whether status suffix should be hidden ### forceFocus - type: boolean - description: USED FOR TESTING - forces focus state on the input ### forceHover - type: boolean - description: USED FOR TESTING - forces hover state on the input ### maxLength - type: number - description: Sets the maximum number of characters that can be inserted to a field ### menuArrow - type: boolean - description: Specifies whether input should have a dropdown menu arrow on the right side ### clearButton - type: boolean - description: Displays clear button (X) on a non-empty input ### clearButtonTooltipContent - type: ReactNode - description: When provided hover will display a tooltip with content ### clearButtonTooltipProps - type: TooltipCommonProps - description: Clear button tooltip props ### clearButtonAriaLabel - type: string - description: Aria label for the clear button ### focusOnClearClick - type: boolean - description: Specifies whether to focus the field when clear button is clicked ### name - type: string - description: Reference element data when a form is submitted ### border - type: "none" | "standard" | "round" | "bottomLine" - description: Control the border style of input ### noLeftBorderRadius - type: boolean - description: Specifies whether input shouldn't have rounded corners on its left ### noRightBorderRadius - type: boolean - description: Specifies whether input shouldn't have rounded corners on its right ### onBlur - type: FocusEventHandler - description: Defines a standard input onBlur callback ### onClear - type: (event: KeyboardEvent<HTMLButtonElement> | MouseEvent<HTMLButtonElement, MouseEvent>) => void - description: Displays clear button (X) on a non-empty input and calls a callback function ### onCompositionChange - type: (isComposing: boolean) => void - description: Defines a callback function called on compositionstart/compositionend events ### onEnterPressed - type: KeyboardEventHandler<HTMLInputElement> - description: Defines a callback handler that is called when the user presses -enter- ### onEscapePressed - type: KeyboardEventHandler<HTMLInputElement> - description: Defines a callback handler that is called when the user presses -escape- ### onFocus - type: (e?: FocusEvent<HTMLInputElement, Element> | undefined) => void - description: Defines a standard input onFocus callback ### onInputClicked - type: MouseEventHandler - description: Defines a standard input onClick callback ### onKeyDown - type: KeyboardEventHandler<HTMLInputElement> - description: Defines a standard input onKeyDown callback ### onKeyUp - type: KeyboardEventHandler<HTMLInputElement> - description: Defines a standard input onKeyUp callback ### onPaste - type: ClipboardEventHandler<HTMLInputElement> - description: Defines a callback handler that is called when user pastes text from a clipboard (using a mouse or keyboard shortcut) ### placeholder - type: string - description: Sets a placeholder message to display ### prefix - type: ReactNode - description: Pass a component you want to show as the prefix of the input, e.g., text, icon ### readOnly - type: boolean - description: Specifies whether input is read only ### disableEditing - type: boolean - description: Restricts input editing ### rtl - type: boolean - description: Specifies text direction. If true, the text will be displayed from right to left ### size - type: "tiny" | "small" | "medium" | "large" - description: Controls the size of the input ### suffix - type: ReactNode - description: Pass a component you want to show as the suffix of the input, e.g., text, icon ### tabIndex - type: number - description: Indicates that element can be focused and where it participates in sequential keyboard navigation ### textOverflow - type: "ellipsis" | "clip" - description: Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`. ### tooltipPlacement - type: "right" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start" - description: Controls placement of a status tooltip - deprecated ### statusMessageTooltipProps - type: TooltipCommonProps - description: Status message tooltip props ### type - type: string - description: Specifies the type of `<input/>` element to display. Default is text. ### value - type: string | number - description: Specifies the current value of the element ### withSelection - type: boolean - description: No description ### required - type: boolean - description: Specifies whether input is mandatory ### min - type: number - description: Sets a minimum value of an input. Similar to HTML5 min attribute. ### max - type: number - description: Sets a maximum value of an input. Similar to html5 max attribute. ### step - type: number | number[] - description: Specifies the interval between number values ### customInput - type: ReactNode | Function - description: Render a custom input instead of the default html input tag ### pattern - type: string - description: Sets a pattern that typed value must match to be valid (regex) ### inputRef - type: (input: HTMLInputElement) => void | MutableRefObject<HTMLInputElement | null> - description: Ref to the underlying `<input>` DOM element. Accepts callback and object refs. Use for input masking libraries such as `use-mask-input`. Memoize callback refs to avoid reattaching on every render. ### strict - type: boolean - description: not needed anymore — using `min` and `max` enforces strict for both ticker and input automatically. Will be removed in next major release. - deprecated ### hideStepper - type: boolean - description: Specifies whether stepper should be hidden ### onChange - type: (value: number | null, stringValue: string) => void - description: Defines a standard input onChange callback ### invalidMessage - type: string - description: Enables internal validation and defines a message to display when user types invalid value ### onInvalid - type: (stringValue: string, { validationType, value, }: { validationType?: "outOfBoundsError" | "formatError" | undefined; value: string; }) => void - description: Defines a callback function which is called on cases when invalid value is typed. - return { stringValue: string, { validationType: 'formatError' | 'outOfBoundsError', value: string }} - `validationType` - type 'formatError' is set when value is in the wrong format - type 'outOfBoundsError' is set when min or max props are used and value does not match the bounds - `value` - is set to current input value