TextInput

Use the TextInput component to request a small amount of information, such as a name or an email address. To let users input larger amounts of text, use a TextArea instead.

Overview Properties

TextInputProps

Signature:

export declare type TextInputProps = <,  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  | > & <, (value: , event: <>) => > &  & {
    /**
     * Maps to the native input type. Use this to enhance the semantics
     * of the native input, change default keyboards on mobile or support browser
     * autocompletion for specific types.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types}
     *
     * @defaultValue 
     */
    type?:  |  |  |  |  | ;
};

TextInputUncontrolledProps

Name	Type	Default	Description
`defaultValue?`		`-`	The default value of the input.

TextInputControlledProps

Name	Type	Default	Description
`value?`		`-`	The value of the input.

TextInput.Prefix, TextInput.Suffix

You can use the TextInput.Prefix component to render custom content in front of the input, or the TextInput.Suffix component if you need to render content after it.

TextInputContentProps

Name	Type	Default	Description
`children`		`-`	Elements to be displayed in the Prefix slot.

TextInput.Button

You can use the TextInput.Button component to render a button inside the TextInput.Prefix or TextInput.Suffix component.

TextInputButtonProps

extends, , , ,

Name	Default	Description
`children`	`-`	Elements to be displayed in the BaseInput Button slot, preferably an icon or a similar visual element
`disabled?`	`false`	If a button is disabled e.g. it cannot be interacted with. By default, it inherits the disabled prop of the BaseInput, but can be overwritten.
`tooltipText?`	`-`	If specified, a tooltip is rendered with this text, which describes what the button does. Please also consider translating the text in an internationalized context and use a short text description for the tooltip. The positioning and placing of the according tooltip will be handled by the component.
`onClick?`	`-`	Called when the button is interacted with.
`readOnly?`	`-`	Determines whether the input is in read-only mode.

Still have questions?

Find answers in the Dynatrace Community

Go to Dynatrace Community