Skip to main content
Last updated on
Version: 1.0.0

Select

Overview​

Select is a form component that allows users to choose one value from a predefined list of options.

The Select component supports four main states:

  • Default

  • Selected

  • Read Only

  • Disabled

Default​

The Default state represents an empty Select before the user makes a selection.

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

Selected​

The Selected state represents a Select component with a chosen 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>

Read Only​

The Read Only state displays a selected value that cannot be modified, but remains readable.

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

Disabled​

The Disabled state indicates that the Select component is unavailable for 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>

User Experience​

✨ Always use clear and meaningful placeholder text to guide users.

✨ Selected values should be easy to read and visually distinct from placeholders.

✨ Read Only state should clearly differ from Disabled state (readable vs unavailable).

✨ Disabled Select components must not respond to hover or click interactions.

✨ Keep option labels concise to avoid truncation.

✨ Ensure consistent spacing and alignment with other form components.

✨ Use Select only when the number of options is limited; avoid long or complex lists.

Figma​

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

Select UI Design

Last updated on