v0.6.0
ComponentsPhone Input

Phone Input

atom

A phone field with a country-code select add-on.

Phone number
We'll text a code to confirm it.
Enter a valid 10-digit number.

Recipe CSS

This is the exact CSS your kit ships for Phone Input — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === PhoneInput (#8) === */
.phoneinput { padding: 0; }
.phoneinput__country {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-6);
  padding: 0 var(--k-s-8) 0 var(--k-s-10);
  height: 100%;
  background: transparent;
  border: 0;
  border-right: var(--k-divider);
  color: var(--k-fg);
  font: inherit;
  font-size: var(--k-type-small);
  cursor: pointer;
}
.phoneinput__country:hover { background: var(--k-state-hover); }
.phoneinput__flag { font-size: var(--k-type-body); line-height: 1; }
.phoneinput__code { font-variant-numeric: tabular-nums; }
/* .phoneinput--invalid border + focus halo defined in the unified
 * validation block at top of file (state-matched halo system). */
.phoneinput + .phoneinput { margin-top: var(--k-s-6); }