grommet
components

TextInput

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

Storybook
CodeSandbox

Props

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

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 attribute of the input.
"string"

onChange

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

onSelect

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 padding. Only use this when the containing context provides sufficient affordance

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
}
]

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.

{
  "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"
  }
}

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

global.focus.border.color

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

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.weight

The font weight of the text entered.
600

global.input.padding

The padding of the text.
"12px"

Examples