grommet
components

TextInput

a control to input a single line of text, with optional suggestions

Storybook
CodeSandbox

Props

a11yTitle

Custom title to be used by screen readers.
"a user friendly label for screen readers"

defaultSuggestion

Default suggestion to highlight, as an index into the suggestions array.

  If set, the suggestion at the specified index in the suggestions array
  will be highlighted by default when the suggestions drop opens.
number

dropAlign

How to align the drop.
{
top:
"top""bottom,"
bottom:
"top""bottom,"
right:
"left""right,"
left:
"left""right"
}

dropHeight

The height of the drop container.
"xsmall""small""medium""large""xlarge""string"

dropProps

Any valid Drop prop.
"object"

dropTarget

Target where any suggestions drop will be aligned to. This should be a React reference. Typically, this is not required as the drop will be aligned to the TextInput itself by default.

"object"

focusIndicator

Whether the plain text input should receive a focus outline.
truefalse

icon

An optional icon to show. This could be used to provide an indication of what kind of input is expected, like an email icon, or what the input will be used for, like a search icon.

"element"

id

The id attribute of the input.
"string"

messages

Custom messages for TextInput. Used for accessibility by screen readers.

{
enterSelect:
"string,"
suggestionsCount:
"string,"
suggestionsExist:
"string,"
suggestionIsOpen: string
}

name

The name of the attribute when in a Form or FormField.
"string"

onChange

Function that will be called when the user types in the input.
"function"

onSelect

Note: This function is deprecated, use onSuggestionSelect instead. Function that will be called when the user selects a suggestion. The suggestion contains the object chosen from the supplied suggestions. When used in conjunction with onSuggestionSelect this will default to React's onSelect

"function"

onSuggestionSelect

Function that will be called when the user selects a suggestion. The suggestion contains the object chosen from the supplied suggestions.

"function"

onSuggestionsClose

Function that will be called when the suggestions drop is closed.
"function"

onSuggestionsOpen

Function that will be called when the suggestions drop is opened.
"function"

placeholder

Placeholder to use when no value is provided.
"node"

plain

Whether this is a plain input with no border or outline. Use "full" to remove padding in addition to removing border and outline. Only use this when the containing context provides sufficient affordance.

truefalse"full"

reverse

Whether an icon should be reversed so that the icon is at the end of the input.

truefalse

size

The size of the TextInput.
"small""medium""large""xlarge""string"

suggestions

Suggestions to show. It is recommended to avoid showing too many suggestions and instead rely on the user to type more.

[
"string"
{
label:
"node,"
value: any
}
]

textAlign

How to align the text inside the input.
"start""center""end"

value

What text to put in the input.
"string"number

Theme

global.colors.border

The color of the border.
{
  "dark": "rgba(255,255,255,0.33)",
  "light": "rgba(0,0,0,0.33)"
}

global.control.border.color

The border color.
"border"

global.control.border.radius

The border radius.
"4px"

global.control.border.width

The border width.
"1px"

select.step

How many suggestions to render at a time.
20

text

The possible sizes of the text in terms of its font-size and line-height.

{
  "font": {},
  "xsmall": {
    "size": "12px",
    "height": "18px",
    "maxWidth": "288px"
  },
  "small": {
    "size": "14px",
    "height": "20px",
    "maxWidth": "336px"
  },
  "medium": {
    "size": "18px",
    "height": "24px",
    "maxWidth": "432px"
  },
  "large": {
    "size": "22px",
    "height": "28px",
    "maxWidth": "528px"
  },
  "xlarge": {
    "size": "26px",
    "height": "32px",
    "maxWidth": "624px"
  },
  "xxlarge": {
    "size": "34px",
    "height": "40px",
    "maxWidth": "816px"
  },
  "2xl": {
    "size": "34px",
    "height": "40px",
    "maxWidth": "816px"
  },
  "3xl": {
    "size": "42px",
    "height": "48px",
    "maxWidth": "1008px"
  },
  "4xl": {
    "size": "54px",
    "height": "60px",
    "maxWidth": "1296px"
  },
  "5xl": {
    "size": "70px",
    "height": "76px",
    "maxWidth": "1680px"
  },
  "6xl": {
    "size": "90px",
    "height": "96px",
    "maxWidth": "2160px"
  }
}

textInput.extend

Any additional style for TextInput.
"any CSS"
(props) => {}

textInput.container.extend

Any additional style for TextInput container.
"any CSS"
(props) => {}

textInput.placeholder.extend

Any additional style for non-string placeholder inside TextInput.
"any CSS"
(props) => {}

textInput.suggestions.extend

Any additional style for TextInput suggestions.
"any CSS"
(props) => {}

textInput.disabled.opacity

The opacity when the textInput is disabled.
number | string

global.focus.border.color

The border color of the component when in focus.
"focus"

global.focus.outline.color

The outline color around the component when in focus.
string | { dark: string, light: string }

global.focus.outline.size

The size of the outline around the component when in focus.
string

global.focus.shadow.color

The shadow color around the component when in focus.
"focus"

global.focus.shadow.size

The size of the shadow around the component when in focus.
"2px"

global.colors.placeholder

The placeholder color used for the component.
"#AAAAAA"

global.control.disabled.opacity

The opacity when a component is disabled.
0.3

global.input.font.height

The line-height of the text.
string

global.input.font.size

The size of the text.
string

global.input.font.weight

The font-weight of the text. This value will only be applied if global.input.weight is undefined.

600

global.input.weight

This value has been deprecated and replaced by global.input.font.weight.

number | string

global.input.padding

The padding of the text.
{
  "horizontal": "11px",
  "vertical": "11px"
}

global.input.extend

Any additional style for an input.
"any CSS"
(props) => {}

Examples