For Designer

Components/Inputs

Text Input

Text inputs let people enter and edit a single line of text, like a name, an email or an amount

Variants
264
Types
8

Playground

Playground

Pick a variant, then click into the preview to type

40
Input caption

Style=Outline · Type=Default · Size=Medium · State=Placeholder

Pastes into Figma as editable auto layout layers with Unictive values, click the button or press ⌘C to copy

Types

Types

Eight types cover prefixes, suffixes, inline actions and tags. Password ships Filled and Error only

Styles

Styles

Outline sits on white surfaces, Contained fills the field for denser or tinted layouts

Sizes

Sizes

States

States

Focus and Typing use the brand border, Error swaps the border and caption to the error color

Usage

When to use

Use when

  1. People enter a short, single-line value like a name, an email or an amount
  2. The value needs a prefix, a unit or an inline action, use a Leading or Trailing type
  3. People add several short values to one field, use Tag Input

Avoid when

  1. The answer can run longer than one line, use a Text Area
  2. People pick from a known list of options, use a Dropdown
  3. The value is a date or a range of dates, use a Date Picker

Guidance

Do and don’t

Email*name@company.comWe send the receipt to this address
Do

Keep the label above the field and use the caption for hints or format rules

Email
Don’t

Don’t use the placeholder as the label, it disappears as soon as people type

Specs

Tokens and specs

PropertyTokenValue
Field height—48 / 40 / 32
Padding12 px sides, 14 / 10 / 6 px top and bottom
Corner radius8 px
Border#DEDEDE
Focus border#1868D0
Error border and caption#FB3748
Contained fill#F7F7F7
Contained addon fill#EBEBEB
Placeholder#A3A3A3
Value#171717
Icon to text gap8 px
Icon size—20 px · 16 px on Small
Label styleInter Medium 14/20
Value styleInter Regular 14/20
Caption styleInter Regular 12/16
Esc