StorybookHave ideas?
Examples
A Mask component renders a controlled input field that applies formatting to the input value when the field is blurred.
Loading
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 aria-label to the text field to provide additional
context to assistive devices. | |
defaultValue | TextFieldDefaultValue | Sets the initial value. Use this for an uncontrolled component; otherwise,
use the value property. | |
disabled | boolean | ||
fieldClassName | string | ||
autoFocus | boolean | ||
id | string | A unique id to be used on the text field. | |
inputRef | (...args: any[]) => any | Access a reference to the input or textarea element | |
requirementLabel | ReactNode | Text showing the requirement ("Required", "Optional", etc.). See Required and Optional Fields. | |
inversed | boolean | Applies the "inverse" UI theme | |
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 true to valueOnly will return just the
formatted value entered. | |
mask | TextFieldMask | 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 | |
namerequired | string | ||
numeric | boolean | Sets inputMode, type, and pattern to improve accessibility and consistency for number fields. Use this prop instead of type="number", see here for more information. | |
onBlur | (...args: any[]) => any | ||
onChange | (...args: any[]) => any | ||
rows | TextFieldRows | Optionally specify the number of visible text lines for the field. Only applicable if this is a multiline field. | |
size | TextFieldSize | Set the max-width of the input either to 'small' or 'medium'. | |
type | string | text | HTML input type attribute. If you are using type=number please use the numeric prop instead. |
value | TextFieldValue | Sets the input's value. Use this in combination with onChange
for a controlled component; otherwise, set defaultValue. | |
className | string | Additional classes to be added to the root element. | |
labelrequired | ReactNode | Label for the field. | |
errorMessage | ReactNode | Enable the error state by providing an error message. | |
errorMessageClassName | string | Additional classes to be added to the error message | |
errorId | string | The ID of the error message applied to this field. | |
hint | ReactNode | Additional hint text to display | |
textClassName | string | Additional classes to be added to the label text. | |
errorPlacement | "top" | "bottom" | Location of the error message relative to the field input | |
labelClassName | string | Additional classes to be added to the field label | |
labelId | string | A unique id to be used on the field label. If one isn't provided, a unique ID
will be generated. |
Styles
The following CSS 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.