@wix/design-system
Version:
@wix/design-system
137 lines (134 loc) • 5.16 kB
Markdown
### 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
### 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
### size
- type: "small" | "medium"
- description: Controls the size of the input.
### defaultValue
- type: string
- description: Sets a default value for those who want to use this component un-controlled.
### disabled
- type: boolean
- description: Specifies whether input should be disabled.
### 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.
### hasCounter
- type: boolean
- description: Specifies whether character count is enabled.
### id
- type: string
- description: Assigns an unique identifier for the root element.
### name
- type: string
- description: Reference element data when a form is submitted.
### maxHeight
- type: string
- description: Sets the maximum height of an area in pixels.
### maxLength
- type: number
- description: Defines the maximum text length in number of characters.
### minLength
- type: number
- description: Defines the minimum text length in number of characters.
### menuArrow
- type: boolean
- description: Specifies whether input should have a dropdown menu arrow on the right side
### minHeight
- type: string
- description: Sets the minimum height of an area in pixels.
### onBlur
- type: FocusEventHandler
- description: Defines a standard input onBlur callback
### onChange
- type: ChangeEventHandler
- description: Defines a standard input onChange callback.
### onEnterPressed
- type: KeyboardEventHandler<HTMLTextAreaElement>
- description: Defines a callback handler that is called when user presses enter.
### onEscapePressed
- type: () => void
- description: Defines a callback handler that is called when user presses escape.
### onFocus
- type: (e?: FocusEvent<HTMLTextAreaElement, Element> | undefined) => void
- description: Defines a standard input onFocus callback.
### onKeyDown
- type: KeyboardEventHandler<HTMLTextAreaElement>
- description: Defines a standard input onKeyDown callback.
### onKeyUp
- type: KeyboardEventHandler<HTMLTextAreaElement>
- description: Defines a standard input onKeyUp callback.
### onCompositionStart
- type: (event: CompositionEvent<HTMLTextAreaElement>) => void
- description: Defines a standard input onCompositionStart callback.
### onCompositionEnd
- type: (event: CompositionEvent<HTMLTextAreaElement>) => void
- description: Defines a standard input onCompositionEnd callback.
### placeholder
- type: string
- description: Sets a placeholder message to display.
### readOnly
- type: boolean
- description: Specifies whether input is read only.
### resizable
- type: boolean
- description: Specifies whether area can be manually resized by the user.
### rows
- type: number
- description: Sets initial height of an area to fit a specified number of rows.
### autoGrow
- type: boolean
- description: Specifies whether area should grow and shrink according to user input.
### minRowsAutoGrow
- type: number
- description: Sets the minimum amount of rows the component can have in `autoGrow` mode
- default: 2
### maxRowsAutoGrow
- type: number
- description: Sets the maximum amount of rows the component can have in `autoGrow` mode
### tabIndex
- type: number
- description: Indicates that element can be focused and where it participates in sequential keyboard navigation.
### 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.
### value
- type: string
- description: Defines input value.
### required
- type: boolean
- description: Specifies whether the input area is a mandatory field.
### dir
- type: "auto" | "rtl" | "ltr"
- description: Specifies the text direction. Use "auto" to automatically determine direction based on content.
### status
- type: "loading" | "error" | "warning"
- description: Specifies 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.
### children
- type: InputAreaChildrenFnArgs
- description: Specifies custom textarea render function