Select

The Select component provides clean and accessible dropdown menus using the native HTML <select> element.

Ignix Lite select fields support semantic intent variants, validation states, disabled states, and multiple selection without requiring JavaScript.

---

Intent Variants

Preview

Primary

Primary

Danger

Danger

Warning

Warning

Success

Success

Neutral

Neutral

Code

<select data-intent="primary"></select>

<select data-intent="danger"></select>

<select data-intent="warning"></select>

<select data-intent="success"></select>

<select data-intent="neutral"></select>

---

States

Preview

Disabled

Disabled

Invalid

Error

Required

Required

Code

<select disabled></select>

<select aria-invalid="true"></select>

<select required></select>

---

Multiple Select

Preview

Technologies

JavaScriptTypeScriptPythonJava

Code

<select data-intent="neutral" multiple>
  <option value="JavaScript">JavaScript</option>
  <option value="TypeScript">TypeScript</option>
  <option value="Python">Python</option>
  <option value="Java">Java</option>
</select>

Usage

Preview

Select Country

IndiaUSAGermanyCanada

Code

<label>
  Select Country

  <select data-intent="primary">
    <option value="India">India</option>
    <option value="USA">USA</option>
    <option value="Germany">Germany</option>
    <option value="Canada">Canada</option>
  </select>
</label>

<button data-intent="primary">
  Continue
</button>

---

Attributes

Attribute	Type	Description
data-intent	'primary' | 'danger' | 'warning' | 'success' | 'neutral'	Applies semantic select styles
disabled	boolean	Disables select interactions
required	boolean	Marks the field as required
aria-invalid	boolean	Applies invalid state styling
multiple	boolean	Enables multiple option selection
name	string	Native select field name
option	HTML element	Native dropdown option items