
### type
- type: string
- description: Specifies the type of `<input/>` element to display. Default is text.
### name
- type: string
- description: Reference element data when a form is submitted.
### pattern
- type: string
- description: Sets a pattern that typed value must match to be valid (regex)
### children
- type: ReactNode
- description: Element to render as the popover trigger.

If `children` is a custom React component, it must:
- Accept and forward a `ref` to the underlying DOM element for popover positioning.
- Pass `aria-*` attributes down to the underlying DOM element for accessibility.
- If interactive, must also forward interaction handlers (e.g., `onClick`).

If `children` is a native HTML element, no additional requirements are needed.
### 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.
### role
- type: string
- description: Specifies the role of the input element for accessibility.
### 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 isn't 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 the native `autocomplete` attribute, for example `off` or `email`.
### 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: "error" | "warning" | "loading"
- 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, no tooltip is displayed.
### statusMessageTooltipProps
- type: TooltipCommonProps
- description: Status message tooltip props.
### hideStatusSuffix
- type: boolean
- description: Specifies whether status suffix should be hidden.
### forceFocus
- type: boolean
- description: Forces the focus state on the input.
- internal
### forceHover
- type: boolean
- description: Forces the hover state on the input.
- internal
### 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.
### focusOnClearClick
- type: boolean
- description: Specifies whether to focus the field when clear button is clicked.
### border
- type: "none" | "standard" | "round" | "bottomLine"
- description: Control the border style of input.
### backgroundColor
- type: string
- description: Sets the background color of the input. Accepts any CSS color value.
### 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: FocusEventHandler
- 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)
### onCopy
- type: ClipboardEventHandler<HTMLInputElement>
- description: Defines a callback handler that is called when user copies text to a clipboard (using a mouse or keyboard shortcut)
### placeholder
- type: string
- description: Sets a placeholder message to display.
- default: ''
### 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 is displayed from right to left.
### size
- type: "small" | "medium" | "large"
- description: Controls the size of the input. Default value: `medium`
- default: 'medium'
### 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" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom-start" | "left-end" | "left-start"
- description: Controls placement of a status tooltip.
- deprecated
### value
- type: string
- description: Specifies the current value of the element.
- default: ''
### 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
- description: Specifies the interval between number values.
### customInput
- type: ReactNode | Function
- description: Render a custom input instead of the default html input tag.
### inputRef
- type: null | (instance: HTMLInputElement | null) => void | RefObject<HTMLInputElement>
- 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.
### inputmode
- type: string
- description: Sets the value of the native `inputmode` attribute, which tells mobile browsers which on-screen keyboard to show, for example `numeric` or `email`.
### enterKeyHint
- type: "search" | "enter" | "done" | "go" | "next" | "previous" | "send"
- description: Sets the label of the virtual keyboard's enter key on touch devices.
### ariaRoledescription
- type: string
- description: Sets the `aria-roledescription` attribute of the `<input>` element, giving assistive technologies a readable description of its role.
### clearButtonTooltipContent
- type: ReactNode
- description: When provided, hovering displays a tooltip with this content.
### clearButtonTooltipProps
- type: TooltipCommonProps
- description: Clear button tooltip props.
### clearButtonAriaLabel
- type: string
- description: Aria label for the clear button.
### inputElementRef
- type: any
- description: Specifies reference of the input element.
- internal
### popoverPlacement
- type: "right" | "left" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom-start" | "left-end" | "left-start"
- description: Controls where the color-picker popover opens relative to the input.
### popoverAppendTo
- type: "window" | "viewport" | "scrollParent" | "parent"
- description: Sets the element the color-picker popover is rendered into.
### onConfirm
- type: (color: string | object) => void
- description: Returns confirmed value.
### onCancel
- type: (color: string | object) => void
- description: Returns last confirmed value from `value` prop.
### onChange
- type: (color: string | object) => void
- description: Returns changed value of input or color picker.
### colorPickerChildren
- type: ReactNode | ColorPickerChildrenRenderer
- description: Defines child items to render inside of a component. Accepts any kind of content, or a function that receives `{ changeColor }` to control the `<ColorInput/>` value and returns the content.
### onAddColor
- type: (color: string) => void
- description: Defines a callback handler with color HEX string. Handler is called whenever the `Add Color` button is pressed.
### addTooltipContent
- type: ReactNode
- description: Defines content to show in add button tooltip. Doesn't appear if `onAdd` isn't passed.
### showDrawerOnMobile
- type: boolean
- description: Specifies whether the color picker opens in a bottom `<Drawer/>` when `WixDesignSystemProvider` has `mobile` enabled.
- default: true
### popoverProps
- type: Omit<PopoverNextProps, "children" | "dataHook" | "onClickOutside" | "placement" | "appendTo" | "fixed" | "showArrow" | "shown" | "open" | "onOpenChange">
- description: Accepts popover props that are passed to the color picker popover.
- linkTypeTo: PopoverNext

