Selection And Input
Text Fields
A compact 36px input with a paired light/dark border token and a floating label pattern.
Findings
What's actually in /ig
- ._aa48{height:36px;display:flex;flex:1 0 0;min-width:0} is the field container.
- --ig-text-input-border-prism (219,223,228 / 43,48,54) and its hover variant --ig-text-input-border-hover-prism are real, paired light/dark tokens.
- --input-border-radius:6px applies here as everywhere else inputs appear.
Usage
When to use it
Use when
Use for single-line text input: login, search-like inline entry, post caption controls, comment fields, and compact form values.
Avoid when
Avoid for multiline captions or long readable copy; use Text Views when content should expand beyond one line.
Anatomy
Anatomy
- 01
36px field container
- 02
Border (paired light/dark token)
- 03
Label
- 04
Value text
Specification
Spacing, colour, type, and motion
- Height
- 36px
- Radius
- 6px via --input-border-radius
- Border
- 1px solid rgb(var(--ig-text-input-border-prism))
- Hover border
- rgb(var(--ig-text-input-border-hover-prism))
- Layout
- display:flex; flex:1 0 0; min-width:0
States
States
| State | Behaviour |
|---|---|
| Default | Empty field rests at 36px with the prism border token. |
| Hover | Border darkens through --ig-text-input-border-hover-prism. |
| Focused | Border remains darkened and the text cursor is visible inside the field. |
| Filled | Value text occupies the field while the 36px container and label treatment remain stable. |
| Error | Border switches to --ig-error while preserving the same radius and height. |
| Disabled | Field opacity drops to .5 and input is unavailable. |
Examples
Real interface compositions
Profile settings
Edit profile name field
Name, username, bio link, and pronouns fields keep the same 36px height and prism border token, with helper labels sitting outside the input rather than inside as placeholders.
36px height, --ig-text-input-border-prism, --input-border-radius 6px
Guidance
Usage guidance
- Keep the field at exactly 36px tall — that's the confirmed height across the evidenced selector.
- Source the border colour from the prism token pair, which already handles the hover state distinctly from the resting state.
Do / Don't
Do / Don't
Do
- Use 6px radius, matching every other input-shaped control in the system.
Don’t
- Introduce a taller default field height — 36px is the only evidenced size.
Code
Evidence-backed CSS
Text Fields — derived from /ig
.text-field {
height: 36px;
border-radius: var(--input-border-radius); /* 6px */
border: 1px solid rgb(var(--ig-text-input-border-prism));
}
.text-field:hover { border-color: rgb(var(--ig-text-input-border-hover-prism)); }See also