skip to main content
skip to navigation sidebar
skip to context sidebar
A pack of extensions for grommet 2
Edit this page
created:7/7/2021
updated:7/7/2021
loc
10
comments
30%
passed
3
failed
3
coverage
100%

MaskedInputField

grommet-controls
3.0.2

Component

browse
docs
issues
import { MaskedInputField } from 'grommet-controls';

Main

browse
docs
issues
() => (
  <Form
    onSubmit={() => console.log('onSubmit')}
    pad={{ horizontal: 'small' }}
    focusFirstChild={false}
  >
    <MaskedInputField
      placeholderChar="_"
      mask={[
        '(',
        /[1-9]/,
        /\d/,
        /\d/,
        ')',
        ' ',
        /\d/,
        /\d/,
        /\d/,
        '-',
        /\d/,
        /\d/,
        /\d/,
        /\d/,
      ]}
      placeholder="US Phone"
      name="phone"
      label="Phone"
      validation={[validators.required()]}
    />
    <Box pad="small">
      <Button type="submit" label="Submit" />
    </Box>
  </Form>
)

Commits

Date
Author
Commit Message
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
2 commits

External dependencies

package
imports
peer
react
^17.0.1
React
*

Internal dependencies

file
imports
"../MaskedInput"
MaskedInputIMaskedInputProps
"../WithFormField"
WithFormFieldIWithFormFieldProps

Component JSX

<WithFormField
>
WithFormField
from"../WithFormField"
<MaskedInput
/>
MaskedInput
from"../MaskedInput"

Stories

In Field

browse
docs
issues
() => (
  <Form
    onSubmit={() => console.log('onSubmit')}
    pad={{ horizontal: 'small' }}
    focusFirstChild={false}
  >
    <MaskedInputField
      placeholderChar="_"
      mask={[
        '(',
        /[1-9]/,
        /\d/,
        /\d/,
        ')',
        ' ',
        /\d/,
        /\d/,
        /\d/,
        '-',
        /\d/,
        /\d/,
        /\d/,
        /\d/,
      ]}
      placeholder="US Phone"
      name="phone"
      label="Phone"
      inField={false}
      validation={[validators.required()]}
    />


    <Box pad="small">
      <Button type="submit" label="Submit" />
    </Box>
  </Form>
)

Validation

browse
docs
issues
() => (
  <Form
    onSubmit={() => console.log('onSubmit')}
    pad={{ horizontal: 'small' }}
    focusFirstChild={false}
  >
    <MaskedInputField
      placeholderChar="_"
      mask={[
        '(',
        /[1-9]/,
        /\d/,
        /\d/,
        ')',
        ' ',
        /\d/,
        /\d/,
        /\d/,
        '-',
        /\d/,
        /\d/,
        /\d/,
        /\d/,
      ]}
      placeholder="US Phone"
      name="phone"
      label="Phone"
      validation={[validators.required(), validators.minLength(10)]}
    />
    <Box pad="small">
      <Button type="submit" label="Submit" />
    </Box>
  </Form>
)
Previous
validation/Form
Next
validation/NumberInputField