Input

Overview

Inputs are a form control that let users enter and edit single lines of text. Use them when users need to provide short, structured values such as email addresses.

<Field label="Email">
	<Input placeholder="email@example.com" />
</Field>

Usage Guidelines

• Match the input to the value: Use the appropriate type for the value being collected, such as "email" or "password".
• Use for short values: Use Input for concise, single-line values such as names, email addresses, or passwords. Move longer content to a more suitable control.
• Use placeholders to provide context: Help users understand the expected shape of data to enter by using placeholders to show an example value or expected format.

API Reference

Input

Examples

Basic field

Use Input inside Field to collect a short, labeled value with a clear example or hint.

<Field label="Email">
	<Input placeholder="email@example.com" />
</Field>

Icon

Use an icon to reinforce the input's purpose when the meaning is already clear from the surrounding context or placeholder.

<Input icon={<SearchIcon />} placeholder="Search by name" />