Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

masked-input

v2.6.5arrow_drop_down
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
21
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
5 months ago
SIZE
40 KB
subject
An input field with formalized syntax.
1 contributor
Use masked-input in your project ?
Copied
npm i @bit/grommet.grommet.masked-input
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
revert changes
reload
toggle layout
maximize
modifieddraft
chevron_left
chevron_right

MaskedInput

An input field with formalized syntax.

Usage

import { MaskedInput } from 'grommet';
<MaskedInput id='item' name='item' />

Properties

id

The id attribute of the input.

string

name

The name attribute of the input.

string

onChange

Function that will be called when the user types or pastes text.

function

onBlur

Function that will be called when the user leaves the field.

function

mask

Describes the structure of the mask. If a regexp is provided, it should allow both the final full string element as well as partial strings as the user types characters one by one. Defaults to [].

[{
  length: 
    number
    [number],
  fixed: string,
  options: [string],
  regexp: 
    {

    }
}]

size

The size of the text.

small
medium
large
xlarge
string

value

What text to put in the input. The caller should ensure that it is initially valid with respect to the mask.

string

Intrinsic element

input

Theme

maskedInput.extend

Any additional style for MaskedInput. Expects string | (props) => {}.

Defaults to

undefined

text.medium

The size of the text for MaskedInput. Expects string.

Defaults to

18px

global.focus.border.color

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

Defaults to

focus

global.colors.placeholder

The placeholder color used for the component. Expects string.

Defaults to

#AAAAAA

global.input.weight

The font weight of the text entered. Expects number.

Defaults to

600

global.input.padding

The padding of the text. Expects string.

Defaults to

12px