Text Input

Does this page need improvement? Let us know.

Sometimes we miss things. We rely on user feedback to tell us how we're doing.

Typical input field. Right now, the component only officially supports single-line style inputs, but we're working on expanding to text areas as well.

Example Instance

<TextInput>
	labelPosition="on-input"
    helpText={false}
    placeholderText="email@test.com"
</TextInput>

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add text-input` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Props

Unique

Props unique to this component.

Name	Required	Type	Description	Default Val
endIcon	no	IconName	Icon displayed at the end of the input field	undefined
helpText	no	string	Helper text displayed below the input	undefined
labelBackgroundColor	no	LkColor	Background color used behind the floating label	undefined
labelPosition	no	"default" \| "on-input"	Controls whether the label floats or stays inline	undefined
name	no	string	Name attribute of the input element	undefined
placeholder	no	string	Placeholder text displayed inside the input	undefined

Common

Props with globally-defined behavior that are used in multiple components.

Common Props	Status
{children}	Not Supported
Native HTML attributes	Supported

Ask the LiftKit Devs