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 31 Oct 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 large medium
stateVariantrest focus disabled read-only rest
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, state: rest, 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, state: rest, 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, state: rest, 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, state: rest, 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, state: rest, validation: none, inset?: false, fullWidth?: false
medium
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, 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, 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, state: rest, validation: none, inset?: false, fullWidth?: false
rest
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, 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, 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, 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, state: rest, 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, state: rest, 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, state: rest, 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, state: rest, 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, state: rest, 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, state: rest, 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, state: rest, validation: none, inset?: false, fullWidth?: true
true