SyntaxInput proposal

This is a proposal for a new component in grommet version 2. The purpose of the component is to simplify the experience of adding text data that requires a certain syntax, such as IP addresses, data and time strings, etc.

Some notable aspects:

• The caller would specify a schema describing the available syntax.
• A placeholder will be generated if one isn’t provided.
• The user could tab between input segments.
• The user does not have to type the separator characters but they will be allowed to if they want to.
• Any options would be rendered as a drop down when the user is interacting with a particular segment.
• The user could paste an entire value and it will be coerced into the schema if possible.

Here is an example of using the component to capture a time value:

<SyntaxInput
  schema={[
    {
      length: 2,
      options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      placeholder: 'hh',
    },
    { separator: ':' },
    {
      length: 2,
      options: ['00', '15', '30', '45'],
      placeholder: 'mm',
    },
    { separator: ' ' },
    {
      length: 2,
      options: ['am', 'pm'],
      placeholder: 'ap',
    }
  ]}
  value={value}
  onChange={this.onChange}
/>

Please let us know if this is of interest and any feedback you might have.

[ericsoderberghp]

Agreed on using this for credit cards, where after the first few digits are typed, the schema can be adjusted to align with the type of card.

I wasn’t thinking a single SyntaxInput would be used for all fields you mention.

[c0rv4x]

Hi! Sorry to bump this thread, but how would you implement a submit function once the enter is pressed? I was thinking about Keyboard but that event would grab all the enters that were pressed