Have ideas?
Examples
A Mask component renders a controlled input field that applies formatting to the input value when the field is blurred.
Code
React
Passing a mask
prop into the TextField
component with a valid value will
enable formatting to occur when the field is blurred. To "unmask" the
value, you can import and call the unmaskValue
method.
Name | Type | Default | Description |
---|---|---|---|
ariaLabel | string | Apply an | |
className | string | Additional classes to be added to the root | |
defaultValue | string | number | Sets the initial value. Use this for an uncontrolled component; otherwise,
use the | |
disabled | boolean | ||
errorMessage | React.ReactNode | ||
errorMessageClassName | string | Additional classes to be added to the error message | |
errorPlacement | 'top' | 'bottom' | Location of the error message relative to the field input | |
fieldClassName | string | Additional classes to be added to the field element | |
focusTrigger | boolean | Used to focus | |
hint | React.ReactNode | Additional hint text to display | |
id | string | A unique | |
inputRef | (...args: any[]) => any | Access a reference to the | |
requirementLabel | React.ReactNode | Text showing the requirement ("Required", "Optional", etc.). See Required and Optional Fields. | |
inversed | boolean | Applies the "inverse" UI theme | |
label required | React.ReactNode | Label for the input | |
labelMask | (rawInput: string, valueOnly?: boolean) => string | Applies date format masking to the input value entered
and renders to a text field above the input.
Passing | |
labelClassName | string | Additional classes to be added to the | |
labelId | string | A unique | |
mask | 'currency' | 'phone' | 'ssn' | 'zip' | Apply formatting to the field that's unique to the value you expect to be entered. Depending on the mask, the field's appearance and functionality may be affected. | |
multiline | boolean | Whether or not the text field is a multiline text field | |
name required | string | ||
numeric | boolean | Sets | |
onBlur | (...args: any[]) => any | ||
onChange | (...args: any[]) => any | ||
rows | number | string | Optionally specify the number of visible text lines for the field. Only applicable if this is a multiline field. | |
size | 'small' | 'medium' | Set the max-width of the input either to | |
type | string | 'text' | HTML |
value | string | number | Sets the input's |
Styles
The following Sass variables can be overridden to customize Input/Form components:
Form components
This component uses a text field and its styles, which can be customized by the following variables:
Component maturity
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.