View Only Field — GCash DS Assessment

KeepNeeds Refinement

A read-only form field showing a label and value; non-interactive.

Minor refinements before handoff

Property variant is overloaded with 4 trailing content types — consider renaming to trailingContent (C2). Checkmark uses raster IMG instead of a vector icon (C6).

In Context

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

Live Preview

Properties

variant

Size

hasCheckmark

hasDescription

DS Health

Reusable

Pass

Read-only data display used across profile screens, transaction details, account information, settings displays, and confirmation flows. Highly reusable across contexts.

Self-contained

Pass

Bundles label, value, optional subtext, and optional trailing slot (badge/link/icon). All colors token-bound. Typography scales per size (Default / Large).

Consistent

Partial

Property variant is overloaded — conflates 4 different trailing content types (none/badge/textLink/icon) into one enum. Should be renamed to trailingContent. Size=Default isn't a size name — should be Regular.

Composable

Pass

Composes cleanly in list rows, profile pages, transaction detail sheets, and settings screens. Uses Badge component instance for the "with Badge" variant — good compositional inheritance.

Behavior

State	iOS	Android	Figma Property	Notes
Default	Yes	Yes	variant=Default	Label + value only, no trailing slot.
with Badge	Yes	Yes	variant=with Badge	Badge instance in the trailing slot (e.g. "Change" status chip).
with Text Link	Yes	Yes	variant=with Text Link	Text link in the trailing slot (e.g. "What is this?" contextual help).
with Icon	Yes	Yes	variant=with Icon	Edit icon (pencil) in the trailing slot — typically navigates to an editable state.
Checkmark	Yes	Yes	hasCheckmark=true	Displays a 13×13 checkmark next to the value (e.g. verified status).
Description	Yes	Yes	hasDescription=true	Shows a subtext message below the value (e.g. "Message content" helper text).

Open Issues

Property variant is overloaded. Conflates 4 different trailing content types (none, badge, text link, icon) into a single enum. Better expressed as a trailingContent property with semantic values, or split into separate boolean properties per slot. C2 · Variant & Property Naming
Property value Size=Default isn't a size name. "Default" describes the starting state, not a size. Rename to Regular (or Small) for consistency with standard size naming across the DS. C2 · Variant & Property Naming
Checkmark is a raster image. Uses imgCheck from Figma CDN instead of a vector icon instance. Replace with a vector from the DS icon library for clean cross-platform rendering at any DPI. C6 · Asset & Icon Quality
Code Connect mappings not registered. Blocked until the variant rename and asset fix land. C7 · Code Connect Linkability

Styles

Default

DES DEV

Label + value only. Used for plain read-only information display.

Properties

Size

hasCheckmark

hasDescription

Properties

state Default

Variant Default

Size Default

hasCheckmark false

hasDescription 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

EBViewOnlyField(label: "Account number", value: "•••• 1234")

Colors by State

Display-only component — no interaction states. All colors token-bound.

Role	Token	Value
Label	main/view-only-field/color/label	#6780A9
Value text	main/view-only-field/color/text	#0A2757
Text link	main/view-only-field/color/label-link	#005CE5
Edit icon	main/view-only-field/color/icon	#005CE5
Subtext description	main/subtext-message/primary/label	#6780A9
Badge bg (default)	main/badge/information/light/background	#E5F1FF
Badge label	main/badge/information/light/label	#005CE5

with Badge

DES DEV

Label + value + Badge instance in the trailing slot. Uses Badge component (layout=overflow or similar) for status indicators.

Properties

Size

hasCheckmark

hasDescription

Properties

state Default

Variant with Badge

Size Default

hasCheckmark false

hasDescription 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

EBViewOnlyField(label: "Account number", value: "•••• 1234")

Layout

Role	Token	Large
Height	57px	71px
Width	360px	360px
Label-value gap	8px	8px
Subtext top padding	4px	4px
Trailing icon size	24 × 24	24 × 24
Checkmark size	13 × 13	13 × 13

with Text Link

DES DEV

Label + value + contextual text link (e.g. "What is this?"). Used for helper/learn-more navigation.

Properties

Size

hasCheckmark

hasDescription

Properties

state Default

Variant with Text Link

Size Default

hasCheckmark false

hasDescription 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

EBViewOnlyField(label: "Account number", value: "•••• 1234")

Typography

Role	Token	Large Size
Label	Primary/Label/Light/Small — 14px Semibold	Primary/Label/Light/Base — 16px Semibold
Value text	Primary/Label/Light/Base — 16px Semibold	Primary/Headlines/Section — 22px Bold
Subtext description	Secondary/Bold/Small Caption — 10px Semibold (BarkAda)	Secondary/Bold/Caption — 12px Semibold (BarkAda)
Text link	12px Semibold (BarkAda)	12px Semibold (BarkAda)
Badge label	Primary/Label/Fine — 12px Bold	Primary/Label/Fine — 12px Bold

with Icon

DES DEV

Label + value + 24×24 icon (typically Edit pencil) in the trailing slot. Icon typically navigates to an editable state.

Properties

Size

hasCheckmark

hasDescription

Properties

state Default

Variant with Icon

Size Default

hasCheckmark false

hasDescription 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

EBViewOnlyField(label: "Account number", value: "•••• 1234")

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")
}

Package not yet published. These are the planned distribution paths.

Property Mapping

Figma Property	SwiftUI	Compose
variant=Default	(default — no trailing)	trailing = null
variant=with Badge rename	trailing: { EBBadge(...) }	trailing = { EBBadge(...) }
variant=with Text Link rename	trailing: { Button("...") {} }	trailing = { TextButton(...) }
variant=with Icon rename	trailing: { Image(...) }	trailing = { Icon(...) }
Size=Default rename	.controlSize(.regular)	size = EBFieldSize.Regular
Size=Large	.controlSize(.large)	size = EBFieldSize.Large
hasCheckmark (boolean)	isVerified: Bool	isVerified: Boolean
hasDescription (boolean)	description: String?	description: String?

SwiftUI

ios/Components/FormElements/EBViewOnlyField.swift

Jetpack Compose

android/components/form/EBViewOnlyField.kt

Usage Snippets Planned API

Default

EBViewOnlyField(
    label: "Mobile Number",
    value: "+63 917 123 4567",
    description: "This is your verified number"
)

EBViewOnlyField(
    label = "Mobile Number",
    value = "+63 917 123 4567",
    description = "This is your verified number"
)

with Badge

EBViewOnlyField(
    label: "Account Status",
    value: "Active",
    trailing: {
        EBBadge("Change", state: .information, level: .light)
    }
)

EBViewOnlyField(
    label = "Account Status",
    value = "Active",
    trailing = {
        EBBadge(
            text = "Change",
            state = BadgeState.Information,
            level = BadgeLevel.Light
        )
    }
)

with Icon (Edit)

EBViewOnlyField(
    label: "Email Address",
    value: "dhar@frostdesigngroup.com",
    trailing: {
        Button(action: { /* navigate to edit */ }) {
            Image(systemName: "pencil")
        }
    }
)

EBViewOnlyField(
    label = "Email Address",
    value = "dhar@frostdesigngroup.com",
    trailing = {
        IconButton(onClick = { /* navigate to edit */ }) {
            Icon(Icons.Default.Edit, contentDescription = "Edit")
        }
    }
)

Requirement	iOS	Android
Accessibility label	`.accessibilityLabel("\(label): \(value)")`	`contentDescription = "$label: $value"`
Trailing action (with Icon)	Button with `.accessibilityLabel("Edit \(label)")`	IconButton with `contentDescription = "Edit $label"`
Text link	Button with `.accessibilityHint("Opens help")`	TextButton with `semantics { role = Role.Button }`
Min touch target (trailing action)	44 × 44 pt	48 × 48 dp

Usage Guidelines

Do

Use View Only Field to display verified or system-set data (phone number, email, account status) where the user shouldn't edit directly.

Don't

Use for editable input — use Input Field, Labeled Field, or Select Field instead. Read-only fields imply the value is final or managed elsewhere.

Do

Use the with Icon variant with a pencil to indicate the field can be edited in a separate screen — provides a clear tap target.

Don't

Rely on the icon alone without an accessibility label — screen readers need to announce the trailing action's purpose.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	Semantic names: `container`, `content-container`, `text-container`, `badge-container`, `text-link-container`, `icon-container`. Clean hierarchy.
C2	Variant & Property Naming	Needs Refinement	Property `variant` is overloaded (4 trailing content types as one enum). `Size=Default` isn't a size name — should be `Regular`.
C3	Token Coverage	Ready	All colors bound to design tokens. Space, typography, and badge tokens all present.
C4	Native Mappability	Ready	Maps cleanly to SwiftUI VStack / Compose Column with label + value + optional trailing closure.
C5	Interaction State Coverage	Ready	Display-only component — no interaction states expected. Trailing actions (icon/text link) handle their own tap states.
C6	Asset & Icon Quality	Needs Refinement	Checkmark uses a raster IMG from Figma CDN. Edit icon is a clean vector. Replace checkmark with an icon component instance.
C7	Code Connect Linkability	Needs Refinement	No CLI mappings registered yet.

Variants Inventory (8 total)

4 variant values × 2 Size values. Two booleans (hasCheckmark, hasDescription) apply to all variants.

variant	Size	Height	Node ID
Default	Default	57	18403:4521
with Badge	Default	57	18403:4533
with Text Link	Default	57	18403:4547
with Icon	Default	57	18403:4561
Default	Large	71	18403:4575
with Badge	Large	71	18403:4587
with Text Link	Large	71	18403:4601
with Icon	Large	71	18403:4615

1.0.0 — April 2026Major

Initial Assessment · node 18403:4520

Component assessed — 8 variants documented across variant (Default/with Badge/with Text Link/with Icon) × Size (Default/Large). Read-only data display field with label, value, optional subtext, and optional trailing slot. Grouped under Form Elements. Documented

Initial

Overloaded variant property — variant conflates 4 different trailing content types into one enum. Should be renamed to trailingContent or split into semantic properties. Open

C2 Open

Size=Default should be Size=Regular — "Default" isn't a size name; describes starting state, not dimension. Open

C2 Open

Raster checkmark — Checkmark uses a raster IMG from Figma CDN instead of a vector icon instance. Replace with icon library component. Open

C6 Open

Code Connect mappings — No CLI mappings registered yet. Open

C7 Open