Input
Overview
The input field allows users to enter, edit, and review text data.
The input field supports seven types:
-
Default
-
Error
-
Warning
-
Read-only
-
Disabled
-
Enabled with Hint
-
Multi-line
Default Value State
The input field supports three display states for default values:
-
Default
-
Default & content
-
Editing with clear button
Default
The field contains no value, only the placeholder content is displayed to guide user input.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Default & content
The field displays a default or existing value.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Editing with clear button
Clicks on a field that contains a value the clear icon appears, allowing the user to quickly clear the field content.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Error State
The error state is displayed when the input value does not meet validation rules.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Warning State
The warning state is displayed when the input value is valid but may be incomplete or not recommended.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Read Only State
A read-only field does not allow users to enter, edit, or interact with the data.
Users are only permitted to view the information.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Disable State
Not allowed to edit or enter data, users only permitted to view the information.
All user interactions are disabled (typing, clicking, focusing, or clearing).
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Hints Text
When hint text is provided, a character counter is displayed.
The counter shows the current character count and maximum limit 256 characters and the counter is displayed aligned to the right of the hint text.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Multiple Lines State
The multi-line input supports extended text entry.
Users can resize the input vertically using the resize handle and default height displays 3 lines of text.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
User Experience
✨ The input field is clickable and clearly indicates focus.
✨ The input header (label) is always visible and reflects the current input state.
✨ Placeholder and hint text guide users without replacing visible labels.
✨ Hint text may include a real-time character counter (e.g. 0 / 256).
✨ When the field is focused and contains a value, a clear (cancel) icon is displayed for quick editing.
✨ Error and warning states provide clear, contextual feedback close to the field.
✨ Read-only inputs can receive focus but do not allow editing or clearing.
✨ Disabled inputs do not allow any interaction and are skipped in keyboard navigation.
✨ Multi-line inputs display 3 lines by default and support vertical resizing.
✨ Press Tab / Shift + Tab to navigate between input fields.
✨ Press Enter to submit the form or create a new line (for multi-line inputs).
Figma
All details and specifications in the design can be referenced through the Figma link below.