Flint Components
Input
Inputs take a short line of text. In Flint, an input always lives in a form field with a visible label, optional helper text and an error message.
Component tokens
Every value input uses, on every platform. Colors point at semantic tokens, so they follow light and dark on their own. The focus ring is shared by every component.
| Token | CSS | Swift | Points at | Light | Dark |
|---|---|---|---|---|---|
input.radius | --input-radius | Flint.Component.inputRadius | radius.control | 8px | 8px |
input.height | --input-height | Flint.Component.inputHeight | control.md | 40px | 40px |
input.bg | --input-bg | Flint.Component.inputBg | semantic.surface.default | #ffffff | #161b22 |
input.fg | --input-fg | Flint.Component.inputFg | semantic.text.default | #1e293b | #c9d1d9 |
input.placeholder | --input-placeholder | Flint.Component.inputPlaceholder | semantic.text.placeholder | #334155 | #aeb8c2 |
input.border | --input-border | Flint.Component.inputBorder | semantic.border.control | #64748b | #6e7681 |
input.borderHover | --input-border-hover | Flint.Component.inputBorderHover | semantic.border.controlHover | #475569 | #9aa4af |
input.borderFocus | --input-border-focus | Flint.Component.inputBorderFocus | semantic.border.focus | #1550a0 | #60a5fa |
input.borderError | --input-border-error | Flint.Component.inputBorderError | semantic.border.error | #dc2626 | #f87171 |
focus.ring.color | --focus-ring-color | Flint.Component.focusRingColor | semantic.action.focusRing | #1550a0 | #60a5fa |
focus.ring.width | --focus-ring-width | Flint.Component.focusRingWidth | 2 | 2px | 2px |
focus.ring.offset | --focus-ring-offset | Flint.Component.focusRingOffset | 2 | 2px | 2px |
Contrast
Measured on every build. See Contrast for every pairing.
| Pairing | Needs | Light | Dark |
|---|---|---|---|
| input text | 7:1 | 14.63:1 Pass | 11.21:1 Pass |
| input placeholder | 7:1 | 10.35:1 Pass | 8.60:1 Pass |
| input edge | 3:1 | 4.76:1 Pass | 3.77:1 Pass |
| input hover edge | 3:1 | 7.58:1 Pass | 6.84:1 Pass |
| input focus edge | 3:1 | 7.82:1 Pass | 6.80:1 Pass |
| input error edge | 3:1 | 4.83:1 Pass | 6.25:1 Pass |
| focus ring on page | 3:1 | 7.47:1 Pass | 7.44:1 Pass |
| focus ring on default | 3:1 | 7.82:1 Pass | 6.80:1 Pass |