KeepNeeds Refinement
Labeled Field Component link

A form field with a label-on-top layout, used for plain text and value inputs.

Fix required before handoff
Trailing icon uses rectangle placeholder instead of swappable icon instance (C6). Code Connect mappings not yet registered (C7).
In Context

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

Live Preview
LabelPlaceholderAction
Properties
State
isFilled
DS Health
Reusable
Partial
Works across form contexts requiring labeled inputs with icons. Single-line only — no multi-line variant. Fixed 46px height with no size options.
Self-contained
Pass
Carries its own border, fill, icon slots, and text styles per state. All 4 interaction states defined. Disabled state has distinct background and hidden border.
Consistent
Partial
Boolean naming and casing fixed (C2 resolved): isFilled now uses true/false and property renamed to State. Action button layer renamed to action-button (C1 resolved).
Composable
Partial
Nests in form layouts. However, trailing-icon uses a rectangle placeholder instead of a swappable icon instance (C6), limiting icon customization at the consumer level.
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 renamed from Yes/No to true/false — now maps directly to Swift Bool / Kotlin Boolean C2 Fixed
  • Property state renamed to State (capitalized) — consistent with sibling Form Elements fields C2 Fixed
  • Button - XSmall layer renamed to action-button — now a semantic slot name for flexible consumer customization C1 Fixed
  • Trailing icon uses shared Placeholder component instance — 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 hardcoded Button - XSmall with an action slot. Today the trailing action is baked in — consumers can't swap in other button variants or remove it. A named slot makes the action composable via instance swap. Slot
  • Replace trailing-icon placeholder with a swappable icon instance. The current icon-placeholder RECTANGLE blocks designers from overriding the trailing icon without detaching. Follow the instance-swap pattern used elsewhere in the DS. Slot
  • Add a helperText slot. Validation messages and hint copy are handled externally today — a first-class slot keeps the form anatomy self-contained. Slot
Styles
Default
DES DEV

Idle state with gray border. Leading/trailing icon placeholders, label + value text container, and XSmall action button.

LabelPlaceholderAction
Properties
State
isFilled
leadingIcon
action
Properties
state Default
isFilled false
leadingIcon true
action true
Colors
Bg #FFFFFF
Border #D7E0EF
Label #0A2757
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
Label style Primary/Label/Light/Small
Label font Proxima Soft Semibold · 14 / 14 · +0.25
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. Text colors depend on isFilled (true/false).

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

Focused state with blue border indicating active input.

LabelPlaceholderAction
Properties
State
isFilled
leadingIcon
action
Properties
state Active
isFilled false
leadingIcon true
action true
Colors
Bg #FFFFFF
Border #005CE5
Label #0A2757
Text #0A2757
Layout
Field height 48px
Padding H 12px
Padding V 14px
Border radius radius/radius-2 (6px)
Border 1px solid
Icon size 20 × 20
Typography
Label style Primary/Label/Light/Small
Label font Proxima Soft Semibold · 14 / 14 · +0.25
Value style Primary/Label/Light/Small
Value font Proxima Soft Semibold · 14 / 14 · +0.25
Error
DES DEV

Validation error state with red border.

LabelPlaceholderAction
Properties
State
isFilled
leadingIcon
action
Properties
state Error
isFilled false
leadingIcon true
action true
Colors
Bg #FFFFFF
Border #D61B2C
Label #0A2757
Text #0A2757
Layout
Field height 48px
Padding H 12px
Padding V 14px
Border radius radius/radius-2 (6px)
Border 1px solid
Icon size 20 × 20
Typography
Label style Primary/Label/Light/Small
Label font Proxima Soft Semibold · 14 / 14 · +0.25
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.

LabelPlaceholderAction
Properties
State
isFilled
leadingIcon
action
Properties
state Disabled
isFilled false
leadingIcon true
action true
Colors
Bg #EEF2F9
Border #D7E0EF
Label #90A8D0
Value #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
Label style Primary/Label/Light/Small
Label font Proxima Soft Semibold · 14 / 14 · +0.25
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
State = Default — —
State = Active .focused() interactionSource
State = Error .ebError(true) isError = true
State = Disabled .disabled(true) enabled = false
#label (TEXT) label: String label: String
#value (TEXT) text: Binding<String> value: String
leading-icon leadingIcon: Image? leadingIcon: @Composable?
trailing-icon trailingIcon: Image? trailingIcon: @Composable?
action-button action: EBFieldAction? action: @Composable?
SwiftUI
ios/Components/FormElements/EBLabeledField.swift
Jetpack Compose
android/components/form/EBLabeledField.kt
Usage Snippets Planned API
Default
EBLabeledField("Label", text: $value)
    .leadingIcon(Image("icon-placeholder"))
    .trailingIcon(Image("chevron-right"))
EBLabeledField(
    value = text,
    onValueChange = { text = it },
    label = "Label",
    leadingIcon = { Icon(Icons.Default.Placeholder, null) },
    trailingIcon = { Icon(Icons.Default.ChevronRight, null) }
)
Error
EBLabeledField("Label", text: $value)
    .leadingIcon(Image("icon-placeholder"))
    .ebError(true)
EBLabeledField(
    value = text,
    onValueChange = { text = it },
    label = "Label",
    leadingIcon = { Icon(Icons.Default.Placeholder, null) },
    isError = true
)
Disabled
EBLabeledField("Label", text: $value)
    .leadingIcon(Image("icon-placeholder"))
    .disabled(true)
EBLabeledField(
    value = text,
    onValueChange = { text = it },
    label = "Label",
    leadingIcon = { Icon(Icons.Default.Placeholder, null) },
    enabled = false
)
Accessibility
RequirementiOSAndroid
Minimum touch target 44 x 44 pt 48 x 48 dp
Accessibility label .accessibilityLabel("Label") contentDescription
Error announcement VoiceOver reads error via .accessibilityValue TalkBack reads error via semantics { error() }
Action button label .accessibilityLabel("Action") on button contentDescription on button
Usage Guidelines

Do

Use Labeled Field when the input needs a persistent label above the value, a leading icon for context, and an optional action button.

Don't

Use Labeled Field for simple text entry — use Input Field instead. Labeled Field is for complex form rows with icon context.

Do

Provide meaningful icons in the leading and trailing slots — they help users identify the field purpose at a glance.

Don't

Leave the icon placeholders as-is in production — always swap in a contextual icon or hide the slot.

Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Layer renamed to action-button, now a semantic slot name.
C2 Variant & Property Naming Ready isFilled uses true/false. Property renamed to State (capitalized). Both fixes confirmed in Figma.
C3 Token Coverage Needs Refinement Colors appear correct but token binding not verified.
C4 Native Mappability Ready Maps to custom EBLabeledField on both platforms.
C5 Interaction State Coverage Ready All 4 states defined: Default, Active, Error, Disabled.
C6 Asset & Icon Quality Needs Refinement trailing-icon uses icon-placeholder RECTANGLE — not a swappable icon instance.
C7 Code Connect Linkability Needs Refinement No CLI mappings registered yet.
Code Connect
Aspect Status Notes
Property naming Ready isFilled=true/false and State (capitalized) — C2 fixed in Figma, ready for mapping
State coverage Ready All 4 states defined
Icon slots Needs Refinement leading-icon uses Placeholder instance (OK). trailing-icon uses RECTANGLE (blocked).
Action slot Ready Renamed to action-button — semantic slot name, ready for Code Connect mapping
Native component file Needs Refinement EBLabeledField.swift / EBLabeledField.kt not yet created
Variants Inventory (8 total)

4 State values × 2 isFilled values.

StateisFilledNode ID
Defaulttrue17758:3714
Defaultfalse17758:3723
Activetrue17758:3732
Activefalse17758:3741
Errortrue17758:3750
Errorfalse17758:3759
Disabledtrue17758:3768
Disabledfalse17758:3777
1.2.0 — March 2026Minor
C1 Figma Fix · node 17758:3713
Action button layer renamed — Button - XSmall renamed to action-button. Now uses a semantic slot name, enabling flexible consumer customization and clean Code Connect mapping. Fixed
C1 Fixed
1.1.0 — March 2026Minor
C2 Figma Fix · node 17758:3713
Boolean property renamed — isFilled values changed from Yes/No to true/false. Now maps directly to Swift Bool and Kotlin Boolean for Code Connect. Fixed
C2 Fixed
Property casing corrected — state renamed to State (capitalized) to align with sibling Form Elements fields (Input Field, etc.). Fixed
C2 Fixed
1.0.0 — March 2026Major
Initial Assessment · node 17758:3713
Component assessed — 8 variants documented across State (Default/Active/Error/Disabled) × isFilled (true/false). Part of Form Elements group. Enhanced input with leading icon, label/value text, action button, and trailing icon. 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
Lowercase property name — state uses lowercase, inconsistent with other Form Elements using State (capitalized). Open
C2 Open
Hardcoded button instance — Button - XSmall is not a named action slot, limiting consumer customization. Open
C1 Open
Trailing icon uses RECTANGLE — icon-placeholder in trailing-icon is a RECTANGLE, not a swappable icon instance. Open
C6 Open
Code Connect mappings — No CLI mappings registered yet. Blocked by C2 (property naming) and C6 (icon quality). Open
C7 Open