Selectors

Segmented control — one active segment on a pill track. Code-only; there is no V1.2 Figma symbol.

No Figma counterpart

Figma DSL V1.2 publishes no segmented control. Its former Selectors page was renamed Pickers, and that component is Picker. Selectors is kept for existing screens, but its geometry is not checked against a published symbol.

import SwiftUI
import EandTokens

// Segmented pill: active segment lifts to a white pill on a grey track.
struct Selectors: View {
  let options: [String]; @Binding var index: Int
  var body: some View {
    HStack(spacing: 0) {
      ForEach(Array(options.enumerated()), id: \.offset) { i, opt in
        Text(opt).font(.system(size: EandTypography.buttonSm.size, weight: .semibold))
          .padding(.horizontal, EandSpacing.md).frame(height: 36)
          .background(i == index ? EandColor.surfaceCanvasDefault : .clear)
          .clipShape(Capsule()).onTapGesture { index = i }
      }
    }
    .padding(2).background(EandColor.surfaceBaseDefault).clipShape(Capsule())
  }
}

When to use

Use to switch between two or three views of the same content in place.
Don't use to choose a value the user will submit — use a Picker or Radio group. For views at page level, use Tabs.

Props

Prop	Type	Default
`options`	`string[]`	—
`defaultValue?`	`number`	`0`
`onChange?`	`((index: number) => void)`	—
`value?`	`number`	—

Design

There is no V1.2 symbol. The track is surface/base/default with a 2px inset; the active segment is surface/canvas/default; segments are 36px tall with spacing/md inline padding and button/sm labels.

The related Figma page: Pickers — etisalat Consumer App DSL V1.2

When to use

Props

Design

On this page