TextInput

The TextInput component is used to handle user input, providing options for styling via themes and sizes. Also offers options for adding icons, captions, custom content, and error text for the field.

Usage

import { TextInput } from '@harnessio/ui/components'

//...

return (
    <TextInput
    label="Success Input"
    id="someinput"
    value="input with value"
    placeholder="Enter the value"
    theme="success"
  />
)

Disable

Read only

Optional

Theme

The TextInput component accepts a theme prop, which defines the visual state of the input: either success, warning, or danger.

When an error occurs, set theme="danger" and pass the error message to the error prop.

For warnings, set theme="warning" and provide the warning message via the warning prop.

Size

The TextInput component accepts a size prop, which defines the overall size of the input field. Available options are md (medium) and sm (small)

Prefix & suffix

The TextInput component supports prefix and suffix props, which allow adding content before or after the input field.

Orientation

The TextInput component accepts an optional orientation prop, which defines the layout direction of the input and its label. Available options are horizontal and vertical (default).

API Reference

interface InformerProps extends Omit<TooltipProps, "children"> {
  className?: string;
  /**
   * If disabled, the tooltip will not be shown
   */
  disabled?: boolean;
  iconProps?: IconPropsV2;
}

Prop	Required	Default	Type
type	false	text	string
wrapperClassName	false		string
label	false		string
caption	false		string
error	false		string
warning	false		string
optional	false	false	boolean
id	false		string
disabled	false	false	boolean
className	false		string
inputContainerClassName	false		string
theme	false	'default'	'default' | 'success' | 'danger' | 'warning'
size	false	'md'	'md' | 'sm'
prefix	false		ReactNode
suffix	false		ReactNode
value	false		string
defaultValue	false		string
onChange	false		React.ChangeEventHandler<HTMLInputElement>
placeholder	false		string
readOnly	false	false	boolean
informerContent	false		Exclude<ReactNode, boolean | null | undefined>
informerProps	false		InformerProps
labelSuffix	false		ReactNode
orientation	false	'vertical'	'vertical' | 'horizontal'