Form

Input.Balance

View in Figma

An amount-entry row that shows a prompt label above a large display-weight currency value paired with an edit (pencil) icon. The state axis controls whether the value reads as a placeholder (default) or a committed entry (filled), and a hasSeparator boolean toggles a bottom divider for use inside list containers.

Overview

An amount-entry row that shows a prompt label above a large display-weight currency value paired with an edit (pencil) icon. The state axis controls whether the value reads as a placeholder (default) or a committed entry (filled), and a hasSeparator boolean toggles a bottom divider for use inside list containers.

How much money would you like to transfer?
$0
Variant
Default

The default variant.

Anatomy

InputBalance
How much money would you like to transfer?
$0
  1. 1Label.Text  required  Prompt copy above the amount, body/sm regular, content.secondary color.
  2. 2Container.Amount  required  Horizontal row that aligns the large value and the edit icon center-vertically.
  3. 3Label.Value  required  Large display-weight amount. tertiary color in default state, accent color in filled state.
  4. 4Icon  required  Pencil/edit icon instance, accent color, title/sm semibold.
  5. 5Separator  optional  Bottom divider, shown when hasSeparator is true. Stroke uses color.border.primary.

Measurements

How much money would you like to transfer?
$0
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Container
Horizontal padding and vertical gap between label and amount row
spacingGapPositive2xl
16pt
Gap between Label.Value and Icon inside Container.Amount
spacingGapPositive2xs
2pt
Label
Label.Text color
colorContentSecondary
#6D747E
Label.Text typography
style.body.sm.regular
SF Pro Text 17/22
Value
Label.Value color in default (placeholder) state
colorContentTertiary
#8E959D
Label.Value color in filled state and Icon color
colorContentAccent
#4B56C7
Label.Value typography
style.title.lg.bold
SF Pro Text 17/22
Separator
Separator stroke
colorBorderPrimary
#E5E5E8
Icon
Icon typography
style.title.sm.semibold
SF Pro Text 17/22

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
statevariantdefault, filled
hasSeparatorbooleanTrue
labelTexttextHow much money would you like to transfer?
labelValuetext$0

Accessibility

Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.