Searchbar

Rounded search field with a leading search glyph and a voice-search mic. Its Figma page is not yet final.

Not final in Figma

The Searchbar page in Figma DSL V1.2 is marked Not Finalized and has no published symbol. The component follows the page's example frames where they are settled. The stroke and the typing and typed states will follow once the page is final.

Props

Placeholder

import SwiftUI
import EandTokens

// 52pt field on surface/base/default, r16, 20pt search + mic glyphs (mic in brand red).
struct Searchbar: View {
  @Binding var query: String
  var body: some View {
    HStack(spacing: EandSpacing.sm) {
      Image(systemName: "magnifyingglass").font(.system(size: EandIcon.lg))
        .frame(width: EandIcon.lg, height: EandIcon.lg)
      TextField("Search", text: $query)
        .font(.system(size: EandTypography.bodyMd.size))
      Button { } label: { Image(systemName: "mic.fill").font(.system(size: EandIcon.lg)) }
        .foregroundColor(EandColor.textBrandDefault)
    }
    .padding(.horizontal, EandSpacing.lg).frame(height: 52)
    .background(EandColor.surfaceBaseDefault)
    .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius6))
  }
}

When to use

Use above a searchable list, or as an add-on below the TopBar title.
Use AISearch for the “Ask etisalat” assistant entry point.
Don't use for form fields — that is the Input.

Searchbar accepts every native input prop, plus onMic for the voice-search button.

Props

Prop	Type	Default	Description
`onMic?`	`(() => void)`	—

Design

Figma source: Standard search — etisalat Consumer App DSL V1.2

52px tall, spacing/lg (16) inline padding, border-radius/6 (16), fill surface/base/default.
20px search and mic glyphs in 20px boxes; the mic is text/brand/default.
Placeholder and value are body/md.
Not yet built: the 1px stroke (bound to a remote foundation variable with no DSL token), the 16px gaps, and the typing and typed states.

When to use

Props

Design

On this page