Select

Native single-value select field styled as a Seventh UI form control. Custom combobox, search, and multi-select behavior stay with runtime packages.

Default

Status

Support Text

Required

Density

Compact density for toolbars and filters.

States

Hover

Static hover example.

Focus

Focus uses the same visual priority as input.

Device group

Select a device group.

Invalid focus

Invalid styling stays visible on focus.

Disabled

Native disabled state.

Visualize

Dark Theme

Status

Dark select surface.

Required status

Invalid state remains red on focus.

Usage

Use Select for native single-choice fields. Use Radio when all options should stay visible, Menu for actions, and a runtime-owned Combobox for searchable or async selections.

<div class="sui-field sui-field--select">
  <label class="sui-field__label" for="status">Status</label>
  <div class="sui-select">
    <select class="sui-select__control" id="status" aria-describedby="status-help">
      <option value="" disabled selected>Select status</option>
      <option value="online">Online</option>
      <option value="offline">Offline</option>
    </select>
    <span class="sui-select__icon" aria-hidden="true"></span>
  </div>
  <p class="sui-field__support" id="status-help">Support text</p>
</div>