Skip to main content
Last updated on
Version: 1.0.0

Search

Overview​

The Search component allows users to enter keywords to quickly find relevant data or content within the system.

The Search supports four states:

  • Default

  • Typing

  • Search with Filter

  • Search with Filter | Typing

Default​

The default state represents an idle Search input before any user interaction.

<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>

Typing​

The typing state represents an active Search input with user-entered 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>

Search With Filter​

Search with filter state, allows users select a filter to define the search scope, then enter a keyword to search within the filtered data.

<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>

Search With Filter | Typing​

The search with filter | typing state represents an active search with both a selected filter and a keyword entered.

<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​

✨ Use clear placeholder text to indicate searchable content.

✨ Show visual focus and typing states clearly to indicate active input.

✨ Provide a clear (✕) icon when text is entered to improve efficiency.

✨ Filters should be easy to access and understand.

✨ Keep search behavior consistent (e.g. real-time vs submit-based).

✨ Ensure search and filter actions do not block each other.

✨ Avoid triggering searches on every keystroke if performance is a concern.

✨ Maintain consistent spacing and alignment with other input components.

Figma​

All details and specifications in the design can be referenced through the Figma link below.

Search UI Design

Last updated on