TextInput

A text input field with optional suggestions.

Properties

defaultValue {string}
What text to start with in the input.
id {string}
The id attribute of the input.
name {string}
The name attribute of the input.
onDOMChange {function (event)}
Function that will be called when the user types in the input.
onSelect {function ({suggestion})}
Function that will be called when the user selects a suggestion. The suggestion contains the object chosen from the supplied suggestions.
placeHolder {string}
Placeholder text to use when the input is empty.
suggestions [{string}, ...]
Suggestions to show. It is recommended to avoid showing too many suggestions and instead rely on the user to type more.
value {string}
What text to put in the input.

Usage

import TextInput from 'grommet/components/TextInput';

<FormField>
  <TextInput id='item1'
    name='item-1'
    value='one'
    onDOMChange={...}
    onSelect={...}
    suggestions={['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']} />
</FormField>