KeepNeeds Refinement
Select Field Component link

A form field that opens a dropdown of options when tapped — label, value, and chevron.

Fix required before handoff
Peso sign uses BOOLEAN_OPERATION instead of vector (C6). Flag uses raster IMAGE fill (C6). These block clean native mapping.
In Context

Contexts are illustrative. Final screens will reference actual GCash patterns.

Send Money ₱ Amount
Live Preview
₱LabelValue
Properties
State
isFilled
DS Health
Reusable
Partial
Currency/amount selection pattern used across Send Money, Buy Load, Pay Bills, and other GCash flows. Tightly coupled to Philippine peso — not generalizable to other currencies without modification.
Self-contained
Pass
Carries its own border, fill, peso sign, flag, and chevron per state. All 4 interaction states defined with distinct visual treatment. Disabled state has separate background.
Consistent
Partial
isFilled now uses true/false (C2 fixed). Peso sign still uses shape_full BOOLEAN_OPERATION instead of a clean vector (C6).
Composable
Pass
Nests cleanly in form layouts alongside Input Field, Labeled Field, and Recipient Field. Chevron down signals tappable selection affordance.
Behavior
State iOS Android Figma Property Notes
Default Yes Yes State=Default Gray #D7E0EF border, white bg. Peso sign #183462.
Active (Focused) Yes Yes State=Active Blue #005CE5 border.
Error Yes Yes State=Error Red #D61B2C border.
Disabled Yes Yes State=Disabled #EEF2F9 bg, border hidden. Peso sign #7E96BE.
Resolved Issues
  • isFilled renamed from Yes/No to true/false for direct Swift Bool / Kotlin Boolean mapping C2 Fixed
  • Peso Sign shape_full BOOLEAN_OPERATION flattened to a single vector path across all 8 variants C6 Fixed
  • Field Trailing Flag replaced from raster IMAGE fill to vector SVG across all 8 variants C6 Fixed
Open Issues
  • Code Connect mappings not registered. Structural work is complete — registration can proceed against the 8-variant State × isFilled schema. C7 · Code Connect Linkability
Design Recommendations
  • Flatten the Peso Sign shape_full BOOLEAN_OPERATION. Boolean-operation paths render inconsistently across SVG export and native platforms. Replace with a single flattened vector path. Asset
  • Use a vector flag asset. The Philippine flag is currently a raster IMAGE fill. Swap to a vector from the DS icon library so it stays crisp across DPIs and platforms. Asset
  • Generalize to multi-currency. Expose currency symbol and flag as configurable slots so the field can support other currencies (USD, EUR, SGD) without creating a new component per currency. Property
  • Add a helperText slot. Error state has no accompanying text guidance today — add a slot for validation messages consistent with the other form fields. Slot
Styles
Default
DES DEV

Idle state with gray border. Peso sign in dark navy, flag visible, chevron down affordance.

₱LabelValue
Properties
state
isFilled
leadingCurrency
trailingFlag
Properties
state Default
isFilled false
leadingCurrency true
trailingFlag true
Colors
Bg #FFFFFF
Border #D7E0EF
Value #0A2757
Icon #005CE5
Placeholder #90A8D0
Layout
Field height 48px
Padding H 12px
Padding V 14px
Border radius radius/radius-2 (6px)
Border 1px solid
Icon size 20 × 20
Typography
Value style Primary/Label/Light/Small
Value font Proxima Soft Semibold · 14 / 14 · +0.25
Colors by State

All states share the same container structure. Border color is the primary state indicator. Peso sign and text colors shift in disabled state.

Role Token DEFAULTACTIVEERRORDISABLED
Border field/border #D7E0EF #005CE5 #D61B2C hidden
Background field/bg #FFFFFF #FFFFFF #FFFFFF #EEF2F9
Label text field/text/label #0A2757 #0A2757 #0A2757 #0A2757
Value (filled) field/text/filled #0A2757 #0A2757 #0A2757 #90A8D0
Value (empty) field/text/placeholder #90A8D0 #90A8D0 #90A8D0 #C2CFE5
Peso sign field/icon/peso #183462 #183462 #183462 #7E96BE
Active (Focused)
DES DEV

Focused state with blue border indicating active selection.

₱LabelValue
Properties
state
isFilled
leadingCurrency
trailingFlag
Properties
state Active
isFilled false
leadingCurrency true
trailingFlag true
Colors
Bg #FFFFFF
Border #005CE5
Value #0A2757
Icon #005CE5
Layout
Field height 48px
Padding H 12px
Padding V 14px
Border radius radius/radius-2 (6px)
Border 1px solid
Icon size 20 × 20
Typography
Value style Primary/Label/Light/Small
Value font Proxima Soft Semibold · 14 / 14 · +0.25
Layout
Role Token
Height 46px
Corner radius 6px
Peso sign size 15 × 15
Flag size 25 × 16
Flag corner radius 2px
Chevron size 32 × 32
Error
DES DEV

Validation error state with red border.

₱LabelValue
Properties
state
isFilled
leadingCurrency
trailingFlag
Properties
state Error
isFilled false
leadingCurrency true
trailingFlag true
Colors
Bg #FFFFFF
Border #D61B2C
Value #0A2757
Icon #005CE5
Layout
Field height 48px
Padding H 12px
Padding V 14px
Border radius radius/radius-2 (6px)
Border 1px solid
Icon size 20 × 20
Typography
Value style Primary/Label/Light/Small
Value font Proxima Soft Semibold · 14 / 14 · +0.25
Typography
Role Token Value
Label Font Proxima Soft Semibold
Size 16px
Value Font Proxima Soft
Size 14px
Disabled
DES DEV

Non-interactive state with gray background, hidden border, and muted peso sign.

₱LabelValue
Properties
state
isFilled
leadingCurrency
trailingFlag
Properties
state Disabled
isFilled false
leadingCurrency true
trailingFlag true
Colors
Bg #EEF2F9
Border #D7E0EF
Value #90A8D0
Icon #9BC5FD
Layout
Field height 48px
Padding H 12px
Padding V 14px
Border radius radius/radius-2 (6px)
Border 1px solid
Icon size 20 × 20
Typography
Value style Primary/Label/Light/Small
Value font Proxima Soft Semibold · 14 / 14 · +0.25
Installation Planned API

iOS — Swift Package Manager

// In Xcode: File → Add Package Dependencies
"https://github.com/AY-Org/eb-ds-ios"

Android — Gradle (Kotlin DSL)

dependencies {
    implementation("com.eastblue.ds:form-elements:1.0.0")
}

Import

import EastBlueDS  // SwiftUI
import com.eastblue.ds.form.*  // Compose

Package not yet published. These are the planned distribution paths.

Property Mapping
Figma PropertySwiftUICompose
isFilled (true/false) selection: Binding<String?> selectedValue: String?
State = Default — —
State = Active .focused() interactionSource
State = Error .ebError(true) isError = true
State = Disabled .disabled(true) enabled = false
SwiftUI
ios/Components/FormElements/EBSelectField.swift
Jetpack Compose
android/components/form/EBSelectField.kt
Usage Snippets Planned API
Default
EBSelectField("Amount", selection: $amount)
EBSelectField(
    label = "Amount",
    selectedValue = amount,
    onValueChange = { amount = it }
)
Error
EBSelectField("Amount", selection: $amount)
    .ebError(true)
EBSelectField(
    label = "Amount",
    selectedValue = amount,
    onValueChange = { amount = it },
    isError = true
)
Disabled
EBSelectField("Amount", selection: $amount)
    .disabled(true)
EBSelectField(
    label = "Amount",
    selectedValue = amount,
    onValueChange = { amount = it },
    enabled = false
)
Accessibility
RequirementiOSAndroid
Minimum touch target 44 x 44 pt 48 x 48 dp
Accessibility label .accessibilityLabel("Select amount") contentDescription
Role hint .accessibilityHint("Double tap to select") semantics { role = Role.DropdownList }
Error announcement VoiceOver reads error via .accessibilityValue TalkBack reads error via semantics { error() }
Usage Guidelines

Do

Use Select Field for currency amount selection where the peso sign and flag indicator provide essential context for the user.

Don't

Use Select Field for free-text entry — use Input Field instead. Select Field is for predefined selection only.

Do

Show error state with a helper text message below the field explaining the validation issue (e.g. "Minimum amount is 1.00").

Don't

Hide the peso sign or flag — these are essential visual cues that distinguish this field from a generic dropdown.

Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Semantic layer names: container, peso-sign, text-container, flag-container, Chevron Down.
C2 Variant & Property Naming Ready isFilled=true/false — correct boolean convention for native mapping.
C3 Token Coverage Needs Refinement Colors appear correct but token binding not fully verified.
C4 Native Mappability Ready Maps to custom EBSelectField (SwiftUI) / EBSelectField (Compose).
C5 Interaction State Coverage Ready All 4 states defined: Default, Active, Error, Disabled.
C6 Asset & Icon Quality Requires Rework Peso sign uses shape_full BOOLEAN_OPERATION (not a vector). Flag uses raster IMAGE fill.
C7 Code Connect Linkability Needs Refinement No CLI mappings registered yet.
Code Connect
Aspect Status Notes
Property naming Ready isFilled=true/false — boolean convention now correct for Code Connect mapping
Asset quality Requires Rework Peso sign BOOLEAN_OPERATION and raster flag need replacement
State coverage Ready All 4 states defined
Native component file Needs Refinement EBSelectField.swift / EBSelectField.kt not yet created
Variants Inventory (8 total)

4 State values × 2 isFilled values (true/false).

StateisFilledNode ID
Defaulttrue17758:3787
Defaultfalse17758:3797
Activetrue17758:3807
Activefalse17758:3817
Errortrue17758:3827
Errorfalse17758:3837
Disabledtrue17758:3847
Disabledfalse17758:3857
1.1.0 — March 2026 UpdateMinor
C2 Fix — isFilled boolean naming · node 17758:3786
isFilled renamed from Yes/No to true/false — Figma component now uses correct boolean convention. Enables direct Swift Bool / Kotlin Boolean mapping for Code Connect. Fixed
C2 Fixed
1.0.0 — March 2026Major
Initial Assessment · node 17758:3786
Component assessed — 8 variants documented across State (Default/Active/Error/Disabled) × isFilled (true/false). Currency/amount selection field with peso sign, flag, and chevron. Part of Form Elements group. Documented
Initial
Boolean property uses Yes/No — isFilled=Yes/No instead of true/false. Incompatible with Swift Bool and Kotlin Boolean for Code Connect mapping. Fixed in 1.1.0
C2 Fixed
Peso sign uses BOOLEAN_OPERATION — shape_full is a BOOLEAN_OPERATION, not a clean vector path. May render inconsistently on native platforms. Open
C6 Open
Flag uses raster IMAGE fill — Philippine flag in flag-container uses a raster IMAGE fill instead of a vector. May degrade on high-density displays. Open
C6 Open
Code Connect mappings — No CLI mappings registered yet. Blocked by C6 (asset quality). Open
C7 Open