An official website of the United States government
Here's how you know
Official websites use .gov A .gov website belongs to an official government organization in the United States.
Secure .gov websites use HTTPS A lock () or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.
An official website of the United States government
Here's how you know
Official websites use .gov A .gov website belongs to an official government organization in the United States.
Secure .gov websites use HTTPS A lock () or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.
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.
See Storybook for React guidance of this component.
Style customization
The following CSS variables can be overridden to customize Input/Form components:
CSS variables for text-input
Variable
Default Core Theme Value
--text-input__line-height
1.3
--text-input__background-color--disabled
--color-border
--text-input__border-width
2px
--text-input__border-width--error
3px
--text-input__border-color
--color-base
--text-input__border-color--disabled
--color-gray-light
--text-input__border-color--error
--color-error
--text-input__border-color--error--inverse
--color-error-lighter
--text-input__border-color--inverse
--color-black
--text-input__color
--color-base
--text-input__divider-color
--color-gray-light
--text-input__padding
8px
--text-input__border-radius
3px
Form components
This component uses a text field and its styles, which can be customized by the following variables:
Storybook