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.
Live Preview
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. |
Issues
-
isFilledrenamed fromYes/Nototrue/falsefor direct SwiftBool/ KotlinBooleanmapping C2 Fixed - Peso Sign
shape_fullBOOLEAN_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
Recommendations
- Flatten the Peso Sign
shape_fullBOOLEAN_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
helperTextslot. Error state has no accompanying text guidance today — add a slot for validation messages consistent with the other form fields. Slot
Styles
Default
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
Typography
Value style Primary/Label/Light/Small
Value font Proxima Soft Semibold · 14 / 14 · +0.25
Layout
Field height 48px
Padding H 12px
Padding V 14px
Radius radius/radius-2 (6px)
Border 1px solid
Icon size 20 × 20
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 | DEFAULT | ACTIVE | ERROR | DISABLED |
|---|---|---|---|---|---|
| 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)
Properties
state
isFilled
leadingCurrency
trailingFlag
Properties
state Active
isFilled false
leadingCurrency true
trailingFlag true
Colors
Bg #FFFFFF
Border #005CE5
Value #0A2757
Icon #005CE5
Typography
Value style Primary/Label/Light/Small
Value font Proxima Soft Semibold · 14 / 14 · +0.25
Layout
Field height 48px
Padding H 12px
Padding V 14px
Radius radius/radius-2 (6px)
Border 1px solid
Icon size 20 × 20
Typography
| Role | Token | Value |
|---|---|---|
| Label | Font | Proxima Soft Semibold |
| Size | 16px | |
| Value | Font | Proxima Soft |
| Size | 14px |
Error
Properties
state
isFilled
leadingCurrency
trailingFlag
Properties
state Error
isFilled false
leadingCurrency true
trailingFlag true
Colors
Bg #FFFFFF
Border #D61B2C
Value #0A2757
Icon #005CE5
Typography
Value style Primary/Label/Light/Small
Value font Proxima Soft Semibold · 14 / 14 · +0.25
Layout
Field height 48px
Padding H 12px
Padding V 14px
Radius radius/radius-2 (6px)
Border 1px solid
Icon size 20 × 20
Disabled
Properties
state
isFilled
leadingCurrency
trailingFlag
Properties
state Disabled
isFilled false
leadingCurrency true
trailingFlag true
Colors
Bg #EEF2F9
Border #D7E0EF
Value #90A8D0
Icon #9BC5FD
Typography
Value style Primary/Label/Light/Small
Value font Proxima Soft Semibold · 14 / 14 · +0.25
Layout
Field height 48px
Padding H 12px
Padding V 14px
Radius radius/radius-2 (6px)
Border 1px solid
Icon size 20 × 20
Installation
Planned API
iOS — Swift Package Manager
.package(url: "https://github.com/AY-Org/eb-ds-ios", from: "1.0.0")
Android — Gradle (Kotlin DSL)
implementation("com.eastblue.ds:form-elements:1.0.0")
Import
import EastBlueDS import com.eastblue.ds.form.*
Package not yet published. These are the planned distribution paths.
Property Mapping
| Figma Property | SwiftUI | Compose |
|---|---|---|
| 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
| Requirement | iOS | Android |
|---|---|---|
| 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. |
Variants Inventory (8 total)
4 State values × 2 isFilled values (true/false).
| State | isFilled | Node ID |
|---|---|---|
| Default | true | 17758:3787 |
| Default | false | 17758:3797 |
| Active | true | 17758:3807 |
| Active | false | 17758:3817 |
| Error | true | 17758:3827 |
| Error | false | 17758:3837 |
| Disabled | true | 17758:3847 |
| Disabled | false | 17758:3857 |
1.1.0 — March 2026Minor
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
C2 FixedBool / Kotlin Boolean mapping for Code Connect.
Fixed1.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
InitialBoolean property uses Yes/No —
C2 FixedisFilled=Yes/No instead of true/false. Incompatible with Swift Bool and Kotlin Boolean for Code Connect mapping.
Fixed in 1.1.0Peso sign uses BOOLEAN_OPERATION —
C6 Openshape_full is a BOOLEAN_OPERATION, not a clean vector path. May render inconsistently on native platforms.
OpenFlag uses raster IMAGE fill — Philippine flag in
C6 Openflag-container uses a raster IMAGE fill instead of a vector. May degrade on high-density displays.
OpenCode Connect mappings — No CLI mappings registered yet. Blocked by C6 (asset quality).
Open
C7 Open