KeepNeeds Refinement
Recipient Field Component link

A form field showing a selected recipient — avatar, name, and contact identifier.

Fix required before handoff
Both trailing icons are non-swappable rectangles (C6). This blocks direct native property mapping for icon slots.
In Context

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

Send Money
Live Preview
Mobile NumberEnter number or name
Properties
State
isFilled
DS Health
Reusable
Partial
Specific to recipient/contact entry in money transfer flows (Send Money, Pay Bills). Not a general-purpose field — the two-line layout with trailing icon pair is domain-specific.
Self-contained
Pass
Carries its own border, fill, label, and text styles per state. All 4 interaction states defined. 56px height, 6px corner radius. Disabled state has distinct background.
Consistent
Partial
isFilled now uses true/false (C2 fixed). Value layer renamed to #value (C1 fixed) — now consistent with sibling fields.
Composable
Warn
Trailing icons are icon-placeholder RECTANGLEs (C6) — not swappable icon instances. Cannot compose different icon actions (phonebook, scan QR) without editing the component.
Behavior
State iOS Android Figma Property Notes
Default Yes Yes State=Default Gray #D7E0EF border, white bg. Label + placeholder/value visible.
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. Muted label and text.
Resolved Issues
  • isFilled property renamed from Yes/No to true/false — now maps directly to Swift Bool / Kotlin Boolean C2 Fixed
  • Text layer renamed from #text-placeholder to #value — now consistent with sibling fields (Input Field, Labeled Field) C1 Fixed
  • Both trailing icons use shared Placeholder component instances — swappable by design. Internal RECTANGLE is the default visual, replaced by designers when consuming the component C6 Closed
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
  • Replace icon placeholders with swappable icon instances. The two icon-placeholder RECTANGLEs block instance-swap — phonebook, scan-QR, and other trailing actions can't be dropped in without detaching the master. Slot
  • Document the 56px height rationale. Recipient Field is taller than the standard 46px form fields because of the two-line label + value layout. Call this out in the DS guidelines so it's not mistaken for a design error. Docs
  • Add an errorMessage slot below the field. Inline validation text keeps the field self-contained and matches the pattern proposed for the other form fields. Slot
Styles
Default
DES DEV

Idle state with gray border. Two-line layout: small label above, value/placeholder below. Two trailing icon placeholders.

Mobile NumberEnter number or name
Properties
state
isFilled
showLabel
trailingIcons
Properties
state Default
isFilled false
showLabel true
trailingIcons true
Colors
Bg #FFFFFF
Border #D7E0EF
Text #0A2757
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 two-line container (56px height, 6px radius). Border color is the primary state indicator. Two trailing icon placeholders use a fixed fill across all states.

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

Focused state with blue border indicating active input.

Mobile NumberEnter number or name
Properties
state
isFilled
showLabel
trailingIcons
Properties
state Active
isFilled false
showLabel true
trailingIcons true
Colors
Bg #FFFFFF
Border #005CE5
Text #0A2757
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
Error
DES DEV

Validation error state with red border.

Mobile NumberEnter number or name
Properties
state
isFilled
showLabel
trailingIcons
Properties
state Error
isFilled false
showLabel true
trailingIcons true
Colors
Bg #FFFFFF
Border #D61B2C
Text #0A2757
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
Disabled
DES DEV

Non-interactive state with gray background and hidden border. Muted label and text colors.

Mobile NumberEnter number or name
Properties
state
isFilled
showLabel
trailingIcons
Properties
state Disabled
isFilled false
showLabel true
trailingIcons true
Colors
Bg #EEF2F9
Border #D7E0EF
Text #90A8D0
Placeholder #C2CFE5
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) text: Binding<String> value: String
#label label: String label: String
#text-placeholder placeholder: String placeholder: String
icon-group (2x icons) trailingIcons: [Image] trailingIcons: @Composable
State = Default — —
State = Active .focused() interactionSource
State = Error .ebError(true) isError = true
State = Disabled .disabled(true) enabled = false
SwiftUI
ios/Components/FormElements/EBRecipientField.swift
Jetpack Compose
android/components/form/EBRecipientField.kt
Usage Snippets Planned API
Default
EBRecipientField(
    label: "Mobile Number",
    text: $recipientNumber,
    placeholder: "Enter number or name",
    trailingIcons: [
        Image(systemName: "person.crop.circle"),
        Image(systemName: "qrcode.viewfinder")
    ]
)
EBRecipientField(
    label = "Mobile Number",
    value = recipientNumber,
    onValueChange = { recipientNumber = it },
    placeholder = "Enter number or name",
    trailingIcons = {
        IconButton(onClick = onContactsClick) {
            Icon(Icons.Default.Person, "Contacts")
        }
        IconButton(onClick = onScanClick) {
            Icon(Icons.Default.QrCode, "Scan QR")
        }
    }
)
Error
EBRecipientField(
    label: "Mobile Number",
    text: $recipientNumber,
    placeholder: "Enter number or name"
)
.ebError(true)
EBRecipientField(
    label = "Mobile Number",
    value = recipientNumber,
    onValueChange = { recipientNumber = it },
    placeholder = "Enter number or name",
    isError = true
)
Disabled
EBRecipientField(
    label: "Mobile Number",
    text: $recipientNumber,
    placeholder: "Enter number or name"
)
.disabled(true)
EBRecipientField(
    label = "Mobile Number",
    value = recipientNumber,
    onValueChange = { recipientNumber = it },
    placeholder = "Enter number or name",
    enabled = false
)
Accessibility
RequirementiOSAndroid
Minimum touch target 44 x 44 pt (56px field exceeds) 48 x 48 dp (56px field exceeds)
Accessibility label .accessibilityLabel("Recipient") contentDescription
Error announcement VoiceOver reads error via .accessibilityValue TalkBack reads error via semantics { error() }
Trailing icon labels .accessibilityLabel("Contacts") per icon contentDescription per icon button
Usage Guidelines

Do

Use Recipient Field for contact/number entry in money transfer flows (Send Money, Pay Bills, Buy Load). The two-line layout with trailing icons is purpose-built for this context.

Don't

Use Recipient Field for general text input — use Input Field or Labeled Field instead. The 56px height and icon slots add unnecessary weight for simple text entry.

Do

Provide meaningful trailing icons (e.g. contacts picker, QR scanner) that match the field's purpose. Both slots should have distinct actions.

Don't

Leave icon placeholders as-is in production — they are design placeholders only. Always replace with real icon instances before handoff.

Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Layer renamed to #value, now consistent with sibling fields.
C2 Variant & Property Naming Ready isFilled=true/false — correctly uses native boolean values.
C3 Token Coverage Needs Refinement Colors appear correct but token binding not verified. Icon placeholders use hardcoded #C2C6CF.
C4 Native Mappability Ready Maps to custom EBRecipientField (SwiftUI + Compose). Two-line layout with trailing icon slots.
C5 Interaction State Coverage Ready All 4 states defined: Default, Active, Error, Disabled.
C6 Asset & Icon Quality Requires Rework Both trailing icons are icon-placeholder RECTANGLEs — not swappable icon instances.
C7 Code Connect Linkability Needs Refinement No CLI mappings registered yet.
Code Connect
Aspect Status Notes
Property naming Ready isFilled=true/false — boolean values map directly to native types
Layer naming Requires Rework #text-placeholder needs rename to #value
Icon slots Requires Rework RECTANGLE placeholders — need swappable icon instances
State coverage Ready All 4 states defined
Native component file Needs Refinement EBRecipientField.swift / EBRecipientField.kt not yet created
Variants Inventory (8 total)

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

StateisFilledNode ID
Defaulttrue17758:3868
Defaultfalse17758:3875
Activetrue17758:3882
Activefalse17758:3889
Errortrue17758:3896
Errorfalse17758:3903
Disabledtrue17758:3910
Disabledfalse17758:3917
1.2.0 — March 2026 FixMinor
C1 Resolved · node 17758:3867
#text-placeholder renamed to #value — Value text layer renamed from #text-placeholder to #value. Now consistent with sibling fields (Input Field, Labeled Field) for direct native property mapping. C1 Fixed
C1 Resolved
1.1.0 — March 2026 FixMinor
C2 Resolved · node 17758:3867
isFilled renamed to true/false — Figma property isFilled updated from Yes/No to true/false. Now maps directly to Swift Bool and Kotlin Boolean for Code Connect. C2 Fixed
C2 Resolved
1.0.0 — March 2026Major
Initial Assessment · node 17758:3867
Component assessed — 8 variants documented across State (Default/Active/Error/Disabled) × isFilled (true/false). GCash-specific two-line recipient field with trailing action icons. 56px height (vs 46px standard). 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
Layer naming inconsistency — Value text layer is #text-placeholder instead of #value used by other Form Elements. Fixed in 1.2.0
C1 Fixed
Non-swappable icon placeholders — Both trailing icons are icon-placeholder RECTANGLEs, not component instances. Open
C6 Open
Code Connect mappings — No CLI mappings registered yet. Blocked by C1 and C6 issues. Open
C7 Open