Skip to content
Primer Design System

Primer Design System

Text input

Text input is used to set a value that is a single line of text.

On this page

  • Updated 29 Apr 2024

Playground

No preview available
label?
➡️ trailingAction?
⬅️ leadingVisual?
caption?
inset?
fullWidth?
size
state
validation

Props

NameTypeValuesDefault
inputTextDisabledInstance swap-size=default
trailingActionDisabledInstance swap-size=medium, state=disabled
inputTextTypeInstance swap-size=default
label?Booleantrue false true
trailingActionInstance swap-size=medium, state=rest
➡️ trailingAction?Booleantrue false false
iconInstance swap-EXTERNAL_COMPONENT
⬅️ leadingVisual?Booleantrue false false
caption?Booleantrue false false
sizeVariantsmall medium (default) large medium (default)
stateVariantrest (default) focus disabled read-only rest (default)
validationVariantnone invalid success none
inset?Varianttrue false false
fullWidth?Variantfalse true false

inputTextType

caption?: false, inputTextDisabled: 15341:46418, ⬅️ leadingVisual?: false, trailingActionDisabled: 15341:46476, label?: true, trailingAction: 15341:46485, ➡️ trailingAction?: false, inputTextType: 15341:46436, icon: 31742:155958, size: medium (default), state: rest (default), validation: none, inset?: false, fullWidth?: false
15341:46436

label?

caption?: false, inputTextDisabled: 15341:46418, ⬅️ leadingVisual?: false, trailingActionDisabled: 15341:46476, label?: true, trailingAction: 15341:46485, ➡️ trailingAction?: false, inputTextType: 15341:46436, icon: 31742:155958, size: medium (default), state: rest (default), validation: none, inset?: false, fullWidth?: false
true

trailingAction

caption?: false, inputTextDisabled: 15341:46418, ⬅️ leadingVisual?: false, trailingActionDisabled: 15341:46476, label?: true, trailingAction: 15341:46485, ➡️ trailingAction?: false, inputTextType: 15341:46436, icon: 31742:155958, size: medium (default), state: rest (default), validation: none, inset?: false, fullWidth?: false
15341:46485

icon

caption?: false, inputTextDisabled: 15341:46418, ⬅️ leadingVisual?: false, trailingActionDisabled: 15341:46476, label?: true, trailingAction: 15341:46485, ➡️ trailingAction?: false, inputTextType: 15341:46436, icon: 31742:155958, size: medium (default), state: rest (default), validation: none, inset?: false, fullWidth?: false
31742:155958

size

caption?: false, inputTextDisabled: 15341:46418, ⬅️ leadingVisual?: false, trailingActionDisabled: 15341:46476, label?: true, trailingAction: 15341:46485, ➡️ trailingAction?: false, inputTextType: 15341:46436, icon: 31742:155958, size: medium (default), state: rest (default), validation: none, inset?: false, fullWidth?: false
medium (default)
label?: true, icon: 31742:155958, caption?: false, ⬅️ leadingVisual?: false, ➡️ trailingAction?: false, inputTextType: 15341:46436, trailingActionDisabled: 15341:46476, trailingAction: 15341:46485, inputTextDisabled: 15341:46418, size: small, state: rest (default), validation: none, inset?: false, fullWidth?: false
small
label?: true, caption?: false, inputTextType: 15341:46436, ⬅️ leadingVisual?: false, trailingAction: 15341:46485, ➡️ trailingAction?: false, icon: 31742:155958, inputTextDisabled: 15341:46418, trailingActionDisabled: 15341:46476, size: large, state: rest (default), validation: none, inset?: false, fullWidth?: false
large

state

caption?: false, inputTextDisabled: 15341:46418, ⬅️ leadingVisual?: false, trailingActionDisabled: 15341:46476, label?: true, trailingAction: 15341:46485, ➡️ trailingAction?: false, inputTextType: 15341:46436, icon: 31742:155958, size: medium (default), state: rest (default), validation: none, inset?: false, fullWidth?: false
rest (default)
label?: true, ⬅️ leadingVisual?: false, icon: 31742:155958, ➡️ trailingAction?: false, inputTextDisabled: 15341:46418, trailingAction: 15341:46485, caption?: false, inputTextType: 15341:46436, trailingActionDisabled: 15341:46476, size: medium (default), state: focus, validation: none, inset?: false, fullWidth?: false
focus
label?: true, caption?: false, trailingActionDisabled: 15341:46476, ⬅️ leadingVisual?: false, inputTextType: 15341:46436, ➡️ trailingAction?: false, inputTextDisabled: 15341:46418, trailingAction: 15341:46485, icon: 31742:155958, size: medium (default), state: disabled, validation: none, inset?: false, fullWidth?: false
disabled
label?: true, caption?: false, trailingActionDisabled: 15341:46476, ⬅️ leadingVisual?: false, inputTextType: 15341:46436, ➡️ trailingAction?: false, inputTextDisabled: 15341:46418, trailingAction: 15341:46485, icon: 31742:155958, size: medium (default), state: read-only, validation: none, inset?: false, fullWidth?: false
read-only

validation

caption?: false, inputTextDisabled: 15341:46418, ⬅️ leadingVisual?: false, trailingActionDisabled: 15341:46476, label?: true, trailingAction: 15341:46485, ➡️ trailingAction?: false, inputTextType: 15341:46436, icon: 31742:155958, size: medium (default), state: rest (default), validation: none, inset?: false, fullWidth?: false
none
label?: true, icon: 31742:155958, caption?: false, ⬅️ leadingVisual?: false, inputTextDisabled: 15341:46418, ➡️ trailingAction?: false, inputTextType: 15341:46436, trailingActionDisabled: 15341:46476, trailingAction: 15341:46485, size: medium (default), state: rest (default), validation: invalid, inset?: false, fullWidth?: false
invalid
label?: true, caption?: false, icon: 31742:155958, ⬅️ leadingVisual?: false, ➡️ trailingAction?: false, inputTextType: 15341:46436, trailingActionDisabled: 15341:46476, trailingAction: 15341:46485, inputTextDisabled: 15341:46418, size: medium (default), state: rest (default), validation: success, inset?: false, fullWidth?: false
success

inset?

caption?: false, inputTextDisabled: 15341:46418, ⬅️ leadingVisual?: false, trailingActionDisabled: 15341:46476, label?: true, trailingAction: 15341:46485, ➡️ trailingAction?: false, inputTextType: 15341:46436, icon: 31742:155958, size: medium (default), state: rest (default), validation: none, inset?: false, fullWidth?: false
false
label?: true, caption?: false, trailingActionDisabled: 15341:46476, ⬅️ leadingVisual?: false, trailingAction: 15341:46485, inputTextType: 15341:46436, icon: 31742:155958, ➡️ trailingAction?: false, inputTextDisabled: 15341:46418, size: medium (default), state: rest (default), validation: none, inset?: true, fullWidth?: false
true

fullWidth?

caption?: false, inputTextDisabled: 15341:46418, ⬅️ leadingVisual?: false, trailingActionDisabled: 15341:46476, label?: true, trailingAction: 15341:46485, ➡️ trailingAction?: false, inputTextType: 15341:46436, icon: 31742:155958, size: medium (default), state: rest (default), validation: none, inset?: false, fullWidth?: false
false
label?: true, ⬅️ leadingVisual?: false, icon: 31742:155958, ➡️ trailingAction?: false, trailingAction: 15341:46485, caption?: false, trailingActionDisabled: 15341:46476, inputTextType: 15341:46436, inputTextDisabled: 15341:46418, size: medium (default), state: rest (default), validation: none, inset?: false, fullWidth?: true
true