Amount Text Field — GCash DS Assessment

KeepNeeds Refinement

A display-style numeric input for PHP amount entry in Send Money, Cash-In, and top-up flows. Sits on a single underline, with a label above and supporting text below. Two sizes × four interaction states.

Keep — all findings resolved

Rebuilt on node 4602:18144 in the 2026 Working File. Size = LG | MD × State = Default | Focused | Disabled | Error gives eight variants, and every one carries the same five semantic names — Label, AmountRow wrapping CurrencySymbol · Value · CurrencyCode, and HelperText — with no legacy prefix and no cross-variant mismatch. The Error state colors the border, the full amount row and the helper text, which is the family reference treatment. Keeping Label and HelperText local rather than composing the shared form scaffolding is a recorded decision: this is a centered, large-type standalone field, not a form row. Locale, currency-code and keyboard behavior are documented. All four DS Health traits pass; the only item still open is Code Connect, blocked until the native library exists.

In Context

Contexts are illustrative. Final screens will reference actual GCash patterns (Send Money, Cash-In, Top-up).

Live Preview

Properties

size

state

label

DS Health

Reusable

Pass

Works for any amount entry, and both sizes carry the currency glyph consistently. CurrencySymbol and CurrencyCode are editable text layers, so switching ₱ to another currency is a text edit — not a fork.

Self-contained

Pass

Carries its own typography, border, and helper text, and all four interaction states (Default / Focused / Disabled / Error) ship in both sizes.

Consistent

Pass

Size = LG | MD and State = Default | Focused | Disabled | Error both follow the Property Naming Guidelines and match the siblings. Every layer carries a correct semantic name — Label, AmountRow, CurrencySymbol, Value, CurrencyCode, HelperText — and Error on the State axis is the confirmed family-level exception.

Composable

Pass

AmountRow composes cleanly and CurrencySymbol · Value · CurrencyCode are independently addressable, so a locale can drop the code without restructuring. Label and HelperText stay local by design — the shared FormGroup Header and Subtext Message instances are built for left-aligned form rows and would need overriding in every variant of this centered, large-type field.

Behavior

State	iOS	Android	Figma Property	Notes
Default	Yes	Yes	State=Default	Shows `₱ 0.00 Php` in navy. Underline `#E5EBF4`.
Active (focused)	Yes	Yes	State=Active	Underline darkens to `#183462`; amount shown at full navy. Named `Active` here but `Focused` on Search Field — see open issues.
Disabled	Yes	Yes	State=Disabled	Amount mutes. Label and supporting text keep their default colors — see open issues.
Error	Yes	Yes	State=Error	Red `#D61B2C` for amount, underline, and supporting text, which becomes the validation message.
Size	Yes	Yes	Size=Large \| Medium	Large uses a 70px input row, Medium 50px. Both carry the peso glyph.

Issues

Peso glyph is no longer a raster image. v2.0: Rebuilt on node 4602:18144. The ₱ now renders as a text glyph inside the input row rather than an <img> reference, restoring token-based coloring and clean scaling. Applied by a different route than the recommended icon instance-swap, but it resolves the C6 finding. (C6 · Asset) C6 · Asset & Icon Quality
Active and Disabled states added. v2.0: The state axis is now Default | Active | Disabled | Error, matching Input Field's 4-state model, and every state ships in both sizes. Closes both C5 findings. (C5 · State) C5 · Interaction State Coverage
Large variant now carries the peso glyph. v2.0: Both Size=Large and Size=Medium render ₱ 0.00 Php. The inconsistency where Large dropped the currency mark is gone. (C2) C2 · Variant & Property Naming
State=Error exception confirmed. v2.1: Closed by owner decision at family level — Error stays on the State axis across Form Elements as a deliberate exception to the State/Status rule, matching how most design systems model form-field validation. Applies equally to Search Field and Text Area. (C2 · Property) C2 · Variant & Property Naming
label=yes/no property removed. v2.0: The property is gone from the variant axes, which are now Size × State; the label is always present. This resolves the boolean-naming finding, though by removal rather than the recommended migration to showLabel=true/false — so the ability to hide the label no longer exists. Confirm that was deliberate rather than dropped in the rebuild. (C2 · Rename) C2 · Variant & Property Naming
Amount layers renamed to describe their content. v2.2: The three #amount nodes in every input frame are now CurrencySymbol (₱), Value (the number) and CurrencyCode (Php), and the title layer is Label. The duplicate-name collisions are gone and Value matches §3's Form-content definition exactly. (C1 · Rename) C1 · Layer Structure & Naming
Size values aligned to the standard scale. v2.2: Size = Large | Medium → LG | MD, matching the XS · SM · MD · LG · XL set in §5 of the Property Naming Guidelines. (C2 · Rename) C2 · Variant & Property Naming
Layer and property naming completed. v2.3: Focussed → Focused, matching the guidelines and both siblings; SupportText → HelperText across all eight variants, resolving the term §6 explicitly forbids and picking up the one Error-variant layer the previous sweep missed; and input → AmountRow. Every layer and property value in the set now follows the Property Naming Guidelines. (C1 · C2 · Rename) C2 · Variant & Property Naming
Disabled treatment confirmed intentional. v2.3: Closed by owner decision — Label and HelperText sit outside the enclosed input element, so they deliberately keep their default colours while only the amount inside AmountRow mutes. The disabled affordance belongs to the control, not to the surrounding copy. Differs from Text Area and Search Field, which mute the whole field, because those components enclose their text within the input container. (C5) C5 · Interaction State Coverage
Currency slots ruled unnecessary. v2.3: Closed by owner decision — CurrencySymbol and CurrencyCode are already text layers, so switching ₱ to $ or € is a text edit rather than an instance swap. That is more flexible than a slot for a glyph, and it means the component is not in fact hard-coded to PHP. (Slot) C4 · Native Mappability
Confirmed as a standalone component. v2.3: Closed by owner decision — Amount Text Field stays its own component rather than folding into Input Field as type: .currency. Its display-style anatomy, 53px numeral and currency-triplet row are distinct enough from a standard field to justify separation, and the decision matches Search Field and Text Area. (Family) C4 · Native Mappability
Fractional widths corrected. v2.2: Variants went 384.75 → 360 and inner rows 336.75 → 312; the set narrowed 424.75 → 400. All dimensions are now whole numbers that map cleanly to native layout values. (C4) C4 · Native Mappability
Layer naming verified complete across all eight variants. v2.4: Re-read on the live node. Every variant carries the same five semantic names — Label, AmountRow wrapping CurrencySymbol · Value · CurrencyCode, and HelperText — with no legacy prefix, no duplicate siblings and no cross-variant mismatch. Each text layer can therefore expose as a single property across the set. (C1) C1 · Layer Structure & Naming
Error state colors the full amount row and its helper text. v2.4: In State=Error the border, CurrencySymbol, Value, CurrencyCode and HelperText all move to #D61B2C. The validation message is carried by color as well as position, which is the stronger of the two treatments in Form Elements — Text Area leaves its subtext neutral, and that difference is now tracked on Text Area rather than here. (C5) C5 · Interaction State Coverage
Local Label and HelperText confirmed intentional. v2.5: Amount Text Field deliberately does not compose FormGroup Header and Subtext Message. Those instances are built for left-aligned form rows sitting above a bordered input; this component is a centered, standalone amount entry whose label and helper text are centered on the amount at 18px and 14px, sized against a 53pt value rather than a 14px one. Adopting the shared scaffolding would mean overriding its alignment, sizing and spacing in every variant — inheriting the maintenance cost without the benefit. Recorded as a deliberate divergence so the odd one out in Form Elements reads as a decision. (C4 · Composition) C4 · Native Mappability
Locale and keyboard behavior documented. v2.5: The component shows ₱ and Php together because it is used where the amount must be unambiguous — a transfer confirmation, not a price. Where the surrounding screen already establishes currency, CurrencyCode is omitted and the symbol carries it alone. Locale drives the symbol, the code, and the grouping and decimal separators together, never independently; implementations should format through the platform’s currency formatter rather than string-concatenating a symbol onto a number. Keyboard: decimal pad on both platforms (.keyboardType(.decimalPad) / KeyboardType.Decimal), no locale-switching mid-entry, a hard cap of two fraction digits, and pasted input stripped to digits and a single separator rather than rejected outright — a user pasting ₱1,000.00 should land on 1000.00, not an empty field. (Docs) C4 · Native Mappability

Variants

Amount Text Field

Properties

Size

State

hasLabel

hasLeadingCurrency

hasSubtext

hasTrailingCurrency

Properties

Size LG

State Default

hasLabel True

hasLeadingCurrency True

hasSubtext True

hasTrailingCurrency True

Colors

Label #0A2757

Amount #0A2757

Bottom rule #E5EBF4

Helper text #445C85

Typography

Label —

Amount —

Helper text —

Layout

Height 184px

Width 400px

Radius 0px

Padding H 24px

Padding V 24px

Gap 16px

Alignment Center

EBAmountField(amount: $amount)
    .controlSize(.large)
    .ebState(.default)

Colors by State

All colors bind to the main/amount-text-field/{state}/{role} token family. No variable modes, so the table is a flat state matrix.

Role	Token	DEFAULT	FILLED	ERROR
Border (underline)	amount-text-field/{state}/border	#ADBDDC	#445C85	#D61B2C
Label (top)	amount-text-field/{state}/label	#0A2757	#0A2757	#0A2757
Amount (body)	amount-text-field/{state}/label-amount	#90A8D0	#0A2757	#D61B2C
Peso glyph	amount-text-field/{state}/icon-currency	#D7E0EF	#0A2757	#D61B2C
Subtext	amount-text-field/{state}/subtext	#0A2757	#0A2757	#D61B2C

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
Size = LG \| MD	.controlSize(.large / .regular)	size = EBAmountSize.LG / MD
State = Default \| Focused \| Disabled \| Error	@FocusState · .disabled(true) · .ebError(true)	interactionSource · enabled = false · isError = true
hasLabel (boolean)	label: String?	label: String?
hasLeadingCurrency (boolean)	showCurrencySymbol: Bool	showCurrencySymbol: Boolean
hasTrailingCurrency (boolean)	showCurrencyCode: Bool	showCurrencyCode: Boolean
hasSubtext (boolean)	helperText: String?	helperText: String?
— no Figma property	amount: Binding<Decimal>	amount: String + onAmountChange: (String) -> Unit
— no Figma property	.keyboardType(.decimalPad)	keyboardType = KeyboardType.Decimal

Usage Snippets Planned API

Large — hero amount

EBAmountField(amount: $amount)
    .controlSize(.large)
    .ebLabel("Add Your Label Here")
    .ebHelperText("Add your subtext here")

EBAmountField(
    amount = amount,
    onAmountChange = { amount = it },
    size = EBAmountSize.LG,
    label = "Add Your Label Here",
    helperText = "Add your subtext here"
)

Medium

EBAmountField(amount: $amount)
    .controlSize(.regular)

EBAmountField(
    amount = amount,
    onAmountChange = { amount = it },
    size = EBAmountSize.MD
)

Amount only — no currency symbol or code

EBAmountField(amount: $amount)
    .ebCurrencySymbol(false)
    .ebCurrencyCode(false)

EBAmountField(
    amount = amount,
    onAmountChange = { amount = it },
    showCurrencySymbol = false,
    showCurrencyCode = false
)

Error

EBAmountField(amount: $amount)
    .ebState(.error)
    .ebHelperText("Amount exceeds your balance")

EBAmountField(
    amount = amount,
    onAmountChange = { amount = it },
    state = EBFieldState.Error,
    helperText = "Amount exceeds your balance"
)

Disabled

EBAmountField(amount: $amount)
    .disabled(true)

EBAmountField(
    amount = amount,
    onAmountChange = { amount = it },
    enabled = false
)

Requirement	iOS	Android
Keyboard type	`.keyboardType(.decimalPad)`	`KeyboardType.Decimal`
Currency format	`.currency(code: "PHP")`	`VisualTransformation` + `NumberFormat.getCurrencyInstance()`
Accessibility label	`.accessibilityLabel("Amount in pesos")`	`contentDescription = "Amount in pesos"`
Error announcement	VoiceOver reads error via `.accessibilityValue`	TalkBack reads error via `semantics { error() }`
Minimum touch target	44 x 44 pt	48 x 48 dp

Usage Guidelines

Do

Use .decimalPad / KeyboardType.Decimal so users can enter fractional pesos without switching keyboards.

Don't

Use Amount Text Field for phone numbers, account numbers, or non-currency numerics — it hard-codes the peso glyph and currency formatting.

Do

Pair Large size with a label above and a hint subtext below for hero entry screens (Send Money, Cash-In).

Don't

Drop the peso glyph on Default size to "save space" — the glyph is the primary signal that the input expects currency.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	Every variant carries the same five semantic names — `Label`, `AmountRow` wrapping `CurrencySymbol` · `Value` · `CurrencyCode`, and `HelperText`. The duplicate `#label` and `#amount` layers are gone, so each text layer exposes as a single property across the set.
C2	Variant & Property Naming	Ready	`Size = LG \| MD` × `State = Default \| Focused \| Disabled \| Error`, PascalCase per §1 with Title Case values per §5, on the standard sizing vocabulary. `Active` → `Focused` and `Large\|Medium` → `LG\|MD` both landed; `label=yes/no` is now the `hasLabel` boolean. `Error` on the `State` axis is the documented §6 form-field exception.
C3	Token Coverage	Needs Refinement	Colors moved from the component-scoped namespace to the shared generic scale. Bindings are not readable through the review tooling, so the token paths on the Style tab are indicative and need a Dev Mode confirmation.
C4	Native Mappability	Ready	Maps to `TextField` + `.keyboardType(.decimalPad)` on iOS and `OutlinedTextField` + `KeyboardType.Decimal` on Android. The `AmountRow` stroke renders as a single bottom rule rather than a box, so native draws an underline rather than framework chrome.
C5	Interaction State Coverage	Ready	All four states ship in both sizes — the rule moves `#E5EBF4` → `#183462` focused → `#D61B2C` error, and Disabled mutes the amount to `#C2CFE5`. The label deliberately stays `#0A2757` in Disabled: it identifies the field regardless of whether it can be edited.
C6	Asset & Icon Quality	Not Applicable	The component carries no icons. The peso glyph is a text character in the same style as the amount, so it colours with it rather than needing a vector asset.

Variants Inventory (8 total)

Size (2) × State (4) — all eight combinations exist. The four has booleans are component properties rather than variant axes, so they do not multiply the count. LG is 20px taller than MD, and its amount runs 53/58 Semibold against MD’s 35/38 Bold — a weight change as well as a size change.

Size	State	Dimensions	Node ID
LG	Default	400 × 184	4602:18143
LG	Focused	400 × 184	4602:18139
LG	Disabled	400 × 184	4602:18140
LG	Error	400 × 184	4602:18142
MD	Default	400 × 164	4602:18141
MD	Focused	400 × 164	4602:18138
MD	Disabled	400 × 164	4602:18137
MD	Error	400 × 164	4602:18136

2.6 — September 2026Minor

Style + Code tabs rebuilt against node 4602:18144

Style tab rebuilt as a single card — one spec card driven by a panel mirroring the Figma property panel: Size and State as selects, and hasLabel, hasLeadingCurrency, hasSubtext, hasTrailingCurrency as toggles. The four booleans were invisible to get_node_info, which returns variant properties only. Documented

Style

The stroke is a bottom rule, not a box — AmountRow carries a stroke that reads as a bordered container in the layer data but renders as a single line under the amount. Corrected by checking against an export. Documented

Style

Currency toggles recentre the amount — dropping ₱ or Php re-centres what remains rather than leaving a gap, matching the centred auto-layout. Turning off the label or subtext collapses its block and the card shrinks from 184px. Documented

Style

Property mapping corrected — size = Large / Default, state = Filled and label = yes / no are gone. Now maps Size, State and the four booleans, plus the amount binding and the decimal keyboard. Documented

Code

Variants inventory corrected — from total: 12 on a “2 size × 3 state × 2 label” matrix to the real 8, noting that LG runs 53/58 Semibold against MD’s 35/38 Bold — a weight change as well as a size change. Documented

Code

Scorecard and Code Connect rewritten — C1 still reported duplicate #label / #amount layers, C2 the Active and Large|Medium naming, C5 an unmuted Disabled label. All resolved in v2.2–v2.3. C6 is now Not Applicable: the peso glyph is text, not an asset. Documented

Code

2.5 — September 2026Minor

Composition and locale settled

Local Label and HelperText confirmed intentional — the shared FormGroup Header and Subtext Message instances are built for left-aligned form rows and would need overriding in every variant of this centred, large-type field. Resolved

Locale and keyboard behaviour documented — locale drives the symbol, the code and the separators together; format through the platform currency formatter rather than concatenating. Decimal pad on both platforms, two fraction digits, and pasted input stripped to digits rather than rejected. Resolved

Docs

2.4 — September 2026Patch

Naming verified and error treatment recorded

Layer naming verified complete across all eight variants — no legacy prefix, no duplicate siblings, no cross-variant mismatch. Resolved

Error state colours the full amount row and its helper text — border, symbol, value, code and helper all move to #D61B2C, the stronger of the two treatments in Form Elements. Resolved

2.3 — September 2026Minor

Naming completed and scope confirmed

Layer and property naming completed. Resolved

Disabled treatment confirmed intentional — the label and helper text sit outside the enclosed input, so they keep their colour while the amount mutes. Resolved

Currency slots ruled unnecessary — the symbol and code are text, so a slot would add indirection without adding capability. Resolved

Confirmed a standalone component rather than a composed variant of Input Field. Resolved

2.2 — September 2026Minor

Layer names and sizing scale

Amount layers renamed to describe their content — CurrencySymbol, Value and CurrencyCode replacing three layers that shared one name. Resolved

Size values aligned to the standard scale — Large|Medium → LG|MD. Resolved

Fractional widths corrected. Resolved

2.1 — September 2026Patch

Exception confirmed

State=Error exception confirmed — covered by the §6 form-field exception in the Property Naming Guidelines, so Error stays on the State axis. Resolved

2.0 — September 2026Major

Rebuilt on node 4602:18144 — 2026 Working File

Peso glyph is no longer a raster image — now a text character in the same style as the amount, so it colours with it. Resolved

Active and Disabled states added — the axis now carries all four interaction states. Resolved

Large variant now carries the peso glyph. Resolved

label=yes/no property removed — replaced by the hasLabel boolean with real True/False values. Resolved

1.0.0 — April 2026Major

Initial Assessment · node 152:48122

Component assessed — 12 variants documented across size (Default/Large) × state (Default/Filled/Error) × label (yes/no). Part of Form Elements group. Documented

Initial

Peso Sign is a raster image — Peso glyph rendered as <img src={imgShapeFull}> rather than a vector instance of Peso Sign - Proxima. Blocks tint-color binding and Code Connect asset mapping. Open

C6 Open

Missing Active and Disabled states — Only Default / Filled / Error defined. Sibling Form Elements use a 4-state Default / Active / Error / Disabled model. Open

C5 Open

label property uses yes/no — label=yes/no instead of Boolean showLabel=true/false. Incompatible with Swift Bool / Kotlin Boolean for Code Connect mapping. Open

C2 Open

Code Connect mappings — No CLI mappings registered. Blocked by C2, C5, C6. Open

C7 Open