FixNeeds Refinement
Input Field Component link

A standard form text-input field — label, body, and four interaction states (default, active, error, disabled).

Fix required before handoff
isFilled uses Yes/No instead of true/false (C2). Property naming blocks direct Swift Bool / Kotlin Boolean mapping.
In Context

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

Live Preview
Placeholder
Properties
State
isFilled
DS Health
Reusable
Partial
Works across any text input context. Single-line only — no multi-line or textarea variant. No size variants (fixed 46px height).
Self-contained
Pass
Carries its own border, fill, and text styles per state. All 4 interaction states defined. Disabled state has distinct background.
Consistent
Pass
C2 resolved — isFilled now uses true/false. C1 resolved — text layer renamed from #text-label to #label, consistent with sibling fields.
Composable
Pass
Serves as the base primitive for Labeled Field, Select Field, and Recipient Field. Nests cleanly in form layouts.
Behavior
State iOS Android Figma Property Notes
Default Yes Yes State=Default Gray #D7E0EF border, white bg.
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.
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-label to #label — now consistent with sibling fields C1 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
  • Standardize text layer naming across Form Elements. Input Field now uses #label; verify the remaining fields (Labeled, Select, Recipient, View Only) follow the same convention so Code Connect label-slot mapping is uniform. Rename
  • Add a helperText slot below the field. Validation messages and hint copy are currently handled outside the component — a first-class slot keeps form anatomy self-contained and matches native TextField hint affordances. Slot
  • Add leadingIcon / trailingIcon slots. Labeled Field already has these — extend to Input Field for search, clear, and validation-indicator use cases. Lets the DS cover the full form-element palette without per-screen customization. Slot
Styles
Default
DES DEV

Idle state with gray border. Text color depends on whether the field has a value.

Placeholder
Properties
state
isFilled
leadingIcon
trailingIcon
Properties
state Default
isFilled false
leadingIcon false
trailingIcon false
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 container structure. Border color is the primary state indicator.

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

Focused state with blue border indicating active input.

Placeholder
Properties
state
isFilled
leadingIcon
trailingIcon
Properties
state Active
isFilled false
leadingIcon false
trailingIcon false
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 2px 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.

Placeholder
Properties
state
isFilled
leadingIcon
trailingIcon
Properties
state Error
isFilled false
leadingIcon false
trailingIcon false
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.

Placeholder
Properties
state
isFilled
leadingIcon
trailingIcon
Properties
state Disabled
isFilled false
leadingIcon false
trailingIcon false
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 (Yes/No) text: Binding<String> value: String
State = Default — —
State = Active .focused() interactionSource
State = Error .ebError(true) isError = true
State = Disabled .disabled(true) enabled = false
SwiftUI
ios/Components/FormElements/EBInputField.swift
Jetpack Compose
android/components/form/EBInputField.kt
Usage Snippets Planned API
Default
EBInputField("Placeholder", text: $value)
EBInputField(
    value = text,
    onValueChange = { text = it },
    placeholder = "Placeholder"
)
Error
EBInputField("Placeholder", text: $value)
    .ebError(true)
EBInputField(
    value = text,
    onValueChange = { text = it },
    placeholder = "Placeholder",
    isError = true
)
Disabled
EBInputField("Placeholder", text: $value)
    .disabled(true)
EBInputField(
    value = text,
    onValueChange = { text = it },
    placeholder = "Placeholder",
    enabled = false
)
Accessibility
RequirementiOSAndroid
Minimum touch target 44 x 44 pt 48 x 48 dp
Accessibility label .accessibilityLabel("Input") contentDescription
Error announcement VoiceOver reads error via .accessibilityValue TalkBack reads error via semantics { error() }
Usage Guidelines

Do

Pair with a visible label above or inside the field. Use placeholder text to hint at expected input format.

Don't

Use placeholder text as the only label — it disappears on focus and fails accessibility.

Do

Show error state with a helper text message below the field explaining what needs to be corrected.

Don't

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

Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Layer renamed to #label, now consistent with sibling fields.
C2 Variant & Property Naming Ready isFilled now uses true/false. Boolean naming resolved.
C3 Token Coverage Needs Refinement Colors appear correct but token binding not verified.
C4 Native Mappability Ready Maps to TextField (SwiftUI) / OutlinedTextField (Compose).
C5 Interaction State Coverage Ready All 4 states defined: Default, Active, Error, Disabled.
C6 Asset & Icon Quality Ready No icons in base Input Field — text only.
C7 Code Connect Linkability Needs Refinement No CLI mappings registered yet.
Code Connect
Aspect Status Notes
Property naming Ready isFilled uses true/false — maps directly to native booleans
State coverage Ready All 4 states defined
Native component file Needs Refinement EBInputField.swift / EBInputField.kt not yet created
Variants Inventory (8 total)

4 State values × 2 isFilled values.

StateisFilledNode ID
Defaulttrue17758:3688
Defaultfalse17758:3691
Activetrue17758:3694
Activefalse17758:3697
Errortrue17758:3700
Errorfalse17758:3703
Disabledtrue17758:3706
Disabledfalse17758:3709
1.1.0 — March 2026Minor
C1 + C2 Fixes · Layer naming and boolean naming resolved
isFilled property renamed — isFilled=Yes/No updated to isFilled=true/false in Figma. Now maps directly to Swift Bool and Kotlin Boolean for Code Connect. Fixed
C2 Resolved
Text layer renamed — #text-label renamed to #label in Figma. Now consistent with sibling fields (Labeled Field, Select Field, Recipient Field). Fixed
C1 Resolved
1.0.0 — March 2026Major
Initial Assessment · node 17758:3687
Component assessed — 8 variants documented across State (Default/Active/Error/Disabled) × isFilled (Yes/No). 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. Open
C2 Open
Code Connect mappings — No CLI mappings registered yet. Blocked by C2 (property naming). Open
C7 Open