# Text fields
[Text fields](https://material.io/components/text-fields) let users enter and
edit text.
The text field class consists of the following types:
* [Filled text](#filled-text-field)
* [Outlined text](#outlined-text-field)
## Using text fields
Text fields allow users to enter text into a UI. They typically appear in forms
and dialogs.
Before you can use Material text fields, you need to add a dependency to the
Material Components for Android library. For more information, go to the
[Getting started](/material-components/material-components-android/blob/master/docs/getting-started.md)
page.
A text field is composed of a `TextInputLayout` and a `TextInputEditText` as a
direct child.
_**Note:** Using an `EditText` as the child might work, but `TextInputEditText`
provides accessibility support for the text field and allows `TextInputLayout`
greater control over the visual aspects of the input text. If an `EditText` is
being used, make sure to set its `android:background` to `@null` so that
`TextInputLayout` can set the proper background to it._
### Using `TextInputLayout` programmatically
If you construct the edit text child of a `TextInputLayout` programmatically,
you should use `TextInputLayout's` context to create the view. This will allow
`TextInputLayout` to pass along the appropriate styling to the edit text.
```kt
val editText = TextInputEditText(textInputLayout.getContext());
```
### Using trailing icons
The `TextInputLayout` provides certain pre-packaged `EndIconMode`s that come
with specific behaviors. However, their appearance and behaviors can be
customized via the trailing icon API and its attributes. The `TextInputLayout`
also provides support for a custom trailing icon.
_**Note:** You should opt to use the `EndIconMode` API instead of setting an
end/right compound drawable on the `EditText`._
Password redaction icon
If set, a button is displayed to toggle between the password being displayed as
plain-text or disguised when the `TextInputEditText` is set to display a
password.
```xml
```
Clear text icon
If set, a button is displayed when text is present and clicking it clears the
`EditText` field.
```xml
```
Custom icon
It is possible to set a custom drawable or button as the `EditText`'s trailing
icon via `app:endIconMode="custom"`. You should specify a drawable and content
description for the icon, and, optionally, specify custom behaviors.
```xml
```
Optionally, in code:
```kt
// Icon's functionality.
textInputCustomEndIcon.setEndIconOnClickListener {
// If the icon should work as button, set an OnClickListener to it.
}
// Behavior that depends on the edit text.
textInputCustomEndIcon.addOnEditTextAttachedListener {
// If any specific changes should be done when the edit text is attached (and
// thus when the trailing icon is added to it), set an
// OnEditTextAttachedListener.
// Example: The clear text icon's visibility behavior depends on whether the
// edit text has input present. Therefore, an OnEditTextAttachedListener is set
// so things like editText.getText() can be called.
}
// Behavior if EndIconMode changes.
textInputCustomEndIcon.addOnEndIconChangedListener {
// If any specific changes should be done if/when the endIconMode gets
// changed, set an OnEndIconChangedListener.
// Example: If the password redaction icon is set and a different EndIconMode
// gets set, the TextInputLayout has to make sure that the edit text's
// TransformationMethod is still PasswordTransformationMethod. Because of
// that, an OnEndIconChangedListener is used.
}
```
### Making text fields accessible
Android's text field component APIs support both label text and helper text for
informing the user as to what information is requested for a text field. While
optional, their use is strongly encouraged.
#### Content description
When using **custom icons**, you should set a content description on them so
that screen readers like TalkBack are able to announce their purpose or action,
if any.
For the leading icon, that can be achieved via the
`app:startIconContentDescription` attribute or `setStartIconContentDescription`
method. For the trailing icon, that can be achieved via the
`app:endIconContentDescription` attribute or `setEndIconContentDescription`
method.
When setting an **error message** that contains special characters that screen
readers or other accessibility systems are not able to read, you should set a
content description via the `app:errorContentDescription` attribute or
`setErrorContentDescription` method. That way, when the error needs to be
announced, it will announce the content description instead.
#### Custom `EditText`
If you are using a custom `EditText` as `TextInputLayout`'s child and your text
field requires different accessibility support than the one offered by
`TextInputLayout`, you can set a `TextInputLayout.AccessibilityDelegate` via the
`setTextInputAccessibilityDelegate` method. This method should be used in place
of providing an `AccessibilityDelegate` directly on the `EditText`.
## Filled text field
[Filled text fields](https://material.io/components/text-fields/#filled-text-field)
have more visual emphasis than outlined text fields, making them stand out when
surrounded by other content and components.
_**Note:** The filled text field is the default style if the style is not set._
### Filled text field example
Source code API:
* `TextInputLayout`
* [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputLayout)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputLayout.java)
* `TextInputEditText`
* [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputEditText)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputEditText.java)
The following examples shows a filled text field.
In the layout:
```xml
```
_**Note:** Since this is the default type, you don't need to specify a style tag
as long as you are using a Material Components Theme. If not, set the style to
`@style/Widget.MaterialComponents.TextInputLayout.FilledBox`._
Height variations
`TextInputLayout` provides two height variations for filled text fields,
standard and dense. The
`@style/Widget.MaterialComponents.TextInputLayout.FilledBox` style defaults to
the standard height.
A dense style will reduce the height of a text field by reducing the vertical
padding within the text field. You can achieve this by setting the style to
`@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense`
In the layout:
```xml
```
_**Note:** To change a text field's internal padding and overall dimensions, you
can adjust the `android:padding` attributes on the `TextInputEditText`._
### Anatomy and key properties
1. Container
1. Leading icon (optional)
1. Label text (optional)
1. Input text
1. Trailing icon (optional)
1. Activation indicator
1. Helper text (optional)
Container attributes
| Attribute | Related method(s) | Default value
--------- | ------------------------ | --------------------------------------------------------------------------------------- | -------------
**Color** | `app:boxBackgroundColor` | `setBoxBackgroundColorResource`
`setBoxBackgroundColor`
`getBoxBackgroundColor` | `?attr/colorOnSurface` at 12% opacity over `attr/colorSurface`
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceSmallComponent`
Leading icon (optional) attributes
| Attribute | Related method(s) | Default value
----------------------- | --------------------------------- | ------------------------------------------------- | -------------
**Icon** | `app:startIconDrawable` | `setStartIconDrawable`
`getStartIconDrawable` | `@null`
**Content description** | `app:startIconContentDescription` | `setStartIconContentDescription` | `@null`
**Color** | `app:startIconTint` | `setStartIconTintList` | `?attr/colorOnSurface` at 54% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_filled_icon_tint.xml))
Label text (optional) attributes
The following attributes and methods should be set and called on the
`TextInputLayout` instead of on the edit text in order to avoid unintended
behaviors.
| Attribute | Related method(s) | Default value
-------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | -------------
**Label text** | `app:hintEnabled`
`android:hint` | `setHintEnabled`
`setHint`
`isHintEnabled`
`getHint` | `true` (`app:hintEnabled`)
`@null` (`android:hint`)
**Typography** | `app:hintTextAppearance` | `setHintTextAppearance` | `?attr/textAppearanceCaption`
**Color** | `app:hintTextColor` (floating state)
`android:textColorHint` (other states) | `setHintTextColor`
`setDefaultHintTextColor`
`getHintTextColor`
`getDefaultHintTextColor` | `?attr/colorPrimary` (`app:hintTextColor`)
`?attr/colorOnSurface` at 60% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
Input text attributes
**Important:** The following attributes and methods should be set and called on
the **`TextInputEditText`**, not on the `TextInputLayout`.
| Attribute | Related method(s) | Default value
-------------- | ------------------------ | ------------------------------------------------------------ | -------------
**Input text** | `android:text` | `setText`
`getText` | `@null`
**Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceSubtitle1`
**Color** | `android:textColor` | `setTextColor`
`getTextColors`
`getCurrentTextColor` | `?android:textColorPrimary`
Trailing icon (optional) attributes
| Attribute | Related method(s) | Default value
----------------------- | ------------------------------------------- | --------------------------------------------------------------------------------------- | -------------
**Icon** | `app:endIconMode`
`app:endIconDrawable` | `setEndIconMode`
`setEndIconDrawable`
`getEndIconMode`
`getEndIconDrawable` | `END_ICON_NONE` (`app:endIconMode`)
`@null` (`app:endIconDrawable`)
**Content description** | `app:endIconContentDescription` | `setEndIconContentDescription` | `@null` for `END_ICON_NONE`
**Color** | `app:endIconTint` | `setEndIconTintList` | `?attr/colorOnSurface` at 54% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_filled_icon_tint.xml))
Activation indicator attributes
| Attribute | Related method(s) | Default value
---------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------
**Stroke color** | `app:boxStrokeColor`
`app:boxStrokeErrorColor` | `setBoxStrokeColor`
`setBoxStrokeColorStateList`
`setBoxStrokeErrorColor`
`getBoxStrokeColor`
`getBoxStrokeErrorColor`
| `?attr/colorOnSurface` at 42% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_filled_stroke_color.xml))
`?attr/colorError` for `app:boxStrokeErrorColor` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_error.xml))
**Stroke width** | `app:boxStrokeWidth`
`app:boxStrokeWidthFocused` | N/A | `1dp` (default)
`2dp`(focused)
Helper text (optional) attributes
| Attribute | Related method(s) | Default value
--------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------- | -------------
**Helper text** | `app:helperTextEnabled`
`app:helperText` | `setHelperTextEnabled`
`setHelperText`
`isHelperTextEnabled`
`getHelperText` | `false` (`app:helperTextEnabled`)
`@null` (`app:helperText`)
**Typography** | `app:helperTextTextAppearance` | `setHelperTextTextAppearance` | `app:?attr/textAppearanceCaption`
**Color** | `app:helperTextTextColor` | `setHelperTextColor`
`getHelperTextCurrentTextColor` | `?attr/colorOnSurface` at 60% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
Error message (optional) attributes
| Attribute | Related method(s) | Default value
----------------------------- | ----------------------------- | -------------------------------------------------------------------- | -------------
**Error text** | `app:errorEnabled` | `setErrorEnabled`
`setError`
`isErrorEnabled`
`getError` | `false`
**Typography** | `app:errorTextAppearance` | `setErrorTextAppearance` | `?attr/textAppearanceCaption`
**Color** | `app:errorTextColor` | `setErrorTextColor`
`getErrorCurrentTextColors` | `?attr/colorError` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_error.xml))
**Error content description** | `app:errorContentDescription` | `setErrorContentDescription`
`getErrorContentDescription` | `@null`
**Error icon** | `app:errorIconDrawable` | `setErrorIconDrawable`
`getErrorIconDrawable` | [`@drawable/mtrl_ic_error`](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/drawable/mtrl_ic_error.xml)
**Error icon color** | `app:errorIconTint` | `setErrorIconTintList` | `?attr/colorError` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_error.xml))
Character counter (optional) attributes
| Attribute | Related method(s) | Default value
-------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------
**Character counter text** | `app:counterEnabled`
`app:counterMaxLength` | `setCounterEnabled`
`setCounterMaxLength`
`isCounterEnabled` | `false` (`app:counterEnabled`)
`-1` (`app:counterMaxLength`)
**Typography** | `app:counterTextAppearance`
`app:counterOverflowTextAppearance` | `setCounterTextAppearance`
`setCounterOverflowTextAppearance` | `?attr/textAppearanceCaption`
**Color** | `app:counterTextColor`
`app:counterOverflowTextColor` | `setCounterTextColor`
`setCounterOverflowTextColor`
`getCounterTextColor`
`getCounterOverflowTextColor` | `?attr/colorOnSurface` at 60% (`app:counterTextColor`) (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
`?attr/colorError` (`app:counterOverflowTextColor`) (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_error.xml)
Placeholder text (optional) attributes
| Attribute | Related method(s) | Default value
-------------------- | ------------------------------- | ----------------------------------------------------------------- | -------------
**Placeholder text** | `app:placeholderText` | `setPlaceholderText`
`getPlaceholderText` | `@null`
**Typography** | `app:placeholderTextAppearance` | `setPlaceholderTextAppearance`
`getPlaceholderTextAppearance` | `?attr/textAppearanceSubtitle1`
**Color** | `app:placeholderTextColor` | `setPlaceholderTextColor`
`getPlaceholderTextColor` | `?attr/colorOnSurface` at 60% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
Prefix (optional) attributes
| Attribute | Related method(s) | Default value
--------------- | -------------------------- | ----------------------------------------------------------- | -------------
**Prefix text** | `app:prefixText` | `setPrefixText`
`getPrefixText`
`getPrefixTextView` | `@null`
**Typography** | `app:prefixTextAppearance` | `setPrefixTextAppearance` | `?attr/textAppearanceSubtitle1`
**Color** | `app:prefixTextColor` | `setPrefixTextColor`
`getPrefixTextColor` | `?attr/colorOnSurface` at 60% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
Suffix (optional) attributes
| Attribute | Related method(s) | Default value
-------------- | ------------------------- | -------------------------------------------------------- | -------------
**Sufix text** | `app:sufixText` | `setSufixText`
`getSufixText`
`getSufixTextView` | `@null`
**Typography** | `app:sufixTextAppearance` | `setSufixTextAppearance` | `?attr/textAppearanceSubtitle1`
**Color** | `app:sufixTextColor` | `setSufixTextColor`
`getSufixTextColor` | `?attr/colorOnSurface` at 60% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
Styles
| Style
----------------- | -----
**Default style** | `@style/Widget.MaterialComponents.TextInputLayout.FilledBox`
**Dense style** | `@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense`
Default theme style attribute: `textInputStyle`
_**Note:**
The `TextInputLayout` styles set `materialThemeOverlay` that overrides `editTextStyle` with the specific `TextInputEditText` style needed. Therefore, you don't need to specify a style tag on the edit text.
If you wish to customize the edit text, you can set your own `materialThemeOverlay`, setting `editTextStyle` to a custom style that inherits from the original `Widget.MaterialComponents.TextInputEditText.*` style. See more about theming in the [Theming text fields](#Theming-text-fields) section._
See the full list of
[styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/values/styles.xml)
and
[attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/values/attrs.xml).
## Outlined text field
[Outlined text fields](https://material.io/components/text-fields/#outlined-text-field)
have less visual emphasis than filled text fields. When they appear in places
like forms, where many text fields are placed together, their reduced emphasis
helps simplify the layout.
### Outlined text field example
Source code API:
* `TextInputLayout`
* [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputLayout)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputLayout.java)
* `TextInputEditText`
* [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputEditText)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputEditText.java)
The following example shows an outlined text field.
In the layout:
```xml
```
In code:
```kt
outlinedTextField.setError("Error message")
```
Height variations
`TextInputLayout` provides two height variations for outlined text fields,
standard and dense. The
`@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox` style defaults to
the standard height.
A dense style will reduce the height of a text field by reducing the vertical
padding within the text field. You can achieve this by setting the style to
`@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense`
In the layout:
```xml
```
_**Note:** To change a text field's internal padding and overall dimensions, you
can adjust the `android:padding` attributes on the `TextInputEditText`._
### Anatomy and key properties
1. Container
1. Leading icon (optional)
1. Label text (optional)
1. Input text
1. Trailing icon (optional)
1. Activation indicator
1. Helper text (optional)
Container attributes
| Attribute | Related method(s) | Default value
---------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------
**Color** | N/A | N/A | `@android:color/transparent`
**Stroke color** | `app:boxStrokeColor`
`app:boxStrokeErrorColor` | `setBoxStrokeColor`
`setBoxStrokeColorStateList`
`setBoxStrokeErrorColor`
`getBoxStrokeColor`
`getBoxStrokeErrorColor`
| `?attr/colorOnSurface` at 38% opacity (`app:boxStrokeColor`) (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_outlined_stroke_color.xml))
`?attr/colorError` (`app:boxStrokeErrorColor`) (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_error.xml))
**Stroke width** | `app:boxStrokeWidth`
`app:boxStrokeWidthFocused` | N/A | `1dp` (default)
`2dp`(focused)
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceSmallComponent`
Leading icon (optional) attributes
| Attribute | Related method(s) | Default value
----------------------- | --------------------------------- | ------------------------------------------------- | -------------
**Icon** | `app:startIconDrawable` | `setStartIconDrawable`
`getStartIconDrawable` | `@null`
**Content description** | `app:startIconContentDescription` | `setStartIconContentDescription` | `@null`
**Color** | `app:startIconTint` | `setStartIconTintList` | `?attr/colorOnSurface` at 60% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_outlined_icon_tint.xml))
Label text (optional) attributes
The following attributes and methods should be set and called on the
`TextInputLayout` instead of on the edit text in order to avoid unintended
behaviors.
| Attribute | Related method(s) | Default value
-------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | -------------
**Label text** | `app:hintEnabled`
`android:hint` | `setHintEnabled`
`setHint`
`isHintEnabled`
`getHint` | `true` (`app:hintEnabled`)
`@null` (`android:hint`)
**Typography** | `app:hintTextAppearance` | `setHintTextAppearance` | `?attr/textAppearanceCaption`
**Color** | `app:hintTextColor` (floating state)
`android:textColorHint` (other states) | `setHintTextColor`
`setDefaultHintTextColor`
`getHintTextColor`
`getDefaultHintTextColor` | `?attr/colorPrimary` (`app:hintTextColor`)
`?attr/colorOnSurface` at 60% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
Input text attributes
**Important:** The following attributes and methods should be set and called on
the **`TextInputEditText`**, not on the `TextInputLayout`.
| Attribute | Related method(s) | Default value
-------------- | ------------------------ | ------------------------------------------------------------ | -------------
**Input text** | `android:text` | `setText`
`getText` | `@null`
**Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceSubtitle1`
**Color** | `android:textColor` | `setTextColor`
`getTextColors`
`getCurrentTextColor` | `?android:textColorPrimary`
Trailing icon (optional) attributes
| Attribute | Related method(s) | Default value
----------------------- | ------------------------------------------- | --------------------------------------------------------------------------------------- | -------------
**Icon** | `app:endIconMode`
`app:endIconDrawable` | `setEndIconMode`
`setEndIconDrawable`
`getEndIconMode`
`getEndIconDrawable` | `END_ICON_NONE` (`app:endIconMode`)
`@null` (`app:endIconDrawable`)
**Content description** | `app:endIconContentDescription` | `setEndIconContentDescription` | `@null` for `END_ICON_NONE`
**Color** | `app:endIconTint` | `setEndIconTintList` | `?attr/colorOnSurface` at 60% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_outlined_icon_tint.xml))
Helper text (optional) attributes
| Attribute | Related method(s) | Default value
--------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------- | -------------
**Helper text** | `app:helperTextEnabled`
`app:helperText` | `setHelperTextEnabled`
`setHelperText`
`isHelperTextEnabled`
`getHelperText` | `false` (`app:helperTextEnabled`)
`@null` (`app:helperText`)
**Typography** | `app:helperTextTextAppearance` | `setHelperTextTextAppearance` | `app:?attr/textAppearanceCaption`
**Color** | `app:helperTextTextColor` | `setHelperTextColor`
`getHelperTextCurrentTextColor` | `?attr/colorOnSurface` at 60% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
Error message (optional) attributes
| Attribute | Related method(s) | Default value
----------------------------- | ----------------------------- | -------------------------------------------------------------------- | -------------
**Error text** | `app:errorEnabled` | `setErrorEnabled`
`setError`
`isErrorEnabled`
`getError` | `false`
**Typography** | `app:errorTextAppearance` | `setErrorTextAppearance` | `?attr/textAppearanceCaption`
**Color** | `app:errorTextColor` | `setErrorTextColor`
`getErrorCurrentTextColors` | `?attr/colorError` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_error.xml))
**Error content description** | `app:errorContentDescription` | `setErrorContentDescription`
`getErrorContentDescription` | `@null`
**Error icon** | `app:errorIconDrawable` | `setErrorIconDrawable`
`getErrorIconDrawable` | [`@drawable/mtrl_ic_error`](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/drawable/mtrl_ic_error.xml)
**Error icon color** | `app:errorIconTint` | `setErrorIconTintList` | `?attr/colorError` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_error.xml))
Character counter (optional) attributes
| Attribute | Related method(s) | Default value
-------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------
**Character counter text** | `app:counterEnabled`
`app:counterMaxLength` | `setCounterEnabled`
`setCounterMaxLength`
`isCounterEnabled` | `false` (`app:counterEnabled`)
`-1` (`app:counterMaxLength`)
**Typography** | `app:counterTextAppearance`
`app:counterOverflowTextAppearance` | `setCounterTextAppearance`
`setCounterOverflowTextAppearance` | `?attr/textAppearanceCaption`
**Color** | `app:counterTextColor`
`app:counterOverflowTextColor` | `setCounterTextColor`
`setCounterOverflowTextColor`
`getCounterTextColor`
`getCounterOverflowTextColor` | `?attr/colorOnSurface` at 60% (`app:counterTextColor`) (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
`?attr/colorError` (`app:counterOverflowTextColor`) (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_error.xml))
Placeholder text (optional) attributes
| Attribute | Related method(s) | Default value
-------------------- | ------------------------------- | ----------------------------------------------------------------- | -------------
**Placeholder text** | `app:placeholderText` | `setPlaceholderText`
`getPlaceholderText` | `@null`
**Typography** | `app:placeholderTextAppearance` | `setPlaceholderTextAppearance`
`getPlaceholderTextAppearance` | `?attr/textAppearanceSubtitle1`
**Color** | `app:placeholderTextColor` | `setPlaceholderTextColor`
`getPlaceholderTextColor` | `?attr/colorOnSurface` at 60% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
Prefix (optional) attributes
| Attribute | Related method(s) | Default value
--------------- | -------------------------- | ----------------------------------------------------------- | -------------
**Prefix text** | `app:prefixText` | `setPrefixText`
`getPrefixText`
`getPrefixTextView` | `@null`
**Typography** | `app:prefixTextAppearance` | `setPrefixTextAppearance` | `?attr/textAppearanceSubtitle1`
**Color** | `app:prefixTextColor` | `setPrefixTextColor`
`getPrefixTextColor` | `?attr/colorOnSurface` at 60% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
Suffix (optional) attributes
| Attribute | Related method(s) | Default value
-------------- | ------------------------- | -------------------------------------------------------- | -------------
**Sufix text** | `app:sufixText` | `setSufixText`
`getSufixText`
`getSufixTextView` | `@null`
**Typography** | `app:sufixTextAppearance` | `setSufixTextAppearance` | `?attr/textAppearanceSubtitle1`
**Color** | `app:sufixTextColor` | `setSufixTextColor`
`getSufixTextColor` | `?attr/colorOnSurface` at 60% (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml))
Styles
| Style
----------------- | -----
**Default style** | `@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox`
**Dense style** | `@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense`
Default theme style attribute: N/A
_**Note:**
The `TextInputLayout` styles set `materialThemeOverlay` that overrides `editTextStyle` with the specific `TextInputEditText` style needed. Therefore, you don't need to specify a style tag on the edit text.
If you wish to customize the edit text, you can set your own `materialThemeOverlay`, setting `editTextStyle` to a custom style that inherits from the original `Widget.MaterialComponents.TextInputEditText.*` style. See more about theming in the [Theming text fields](#Theming-text-fields) section._
See the full list of
[styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/values/styles.xml)
and
[attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/res/values/attrs.xml).
## Theming text fields
Text fields support
[Material Theming](https://material.io/components/text-fields/#theming) and can
be customized in terms of color, typography and shape.
Customizing the edit text
The `TextInputLayout` styles apply `TextInputEditText` styles on the edit text
by setting a `materialThemeOverlay` that overrides `editTextStyle`.
If you wish to make changes via styling that will affect the edit text, you
should first create a `TextInputEditText` style that extends from a
`Widget.MaterialComponents.TextInputEditText.*` style:
```xml
```
Then, you should create a theme overlay that extends from a
`ThemeOverlay.MaterialComponents.TextInputEditText.*` style, and set
`editTextStyle` to your previous `TextInputEditText` style:
```xml
```
Then, create a `TextInputLayout` style that uses the theme overlay:
```xml
```
Finally, you can set the `TextInputLayout` style as the default in your app
theme:
```xml
- @style/Widget.AppTheme.TextInputLayout
```
### Text field theming example
API and source code:
* `TextInputLayout`
* [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputLayout)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputLayout.java)
* `TextInputEditText`
* [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputEditText)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputEditText.java)
The following examples show filled and outlined text fields with Material
Theming.
Implementing text field theming
Using theme attributes and styles in `res/values/styles.xml` (themes all text
fields and affects other components):
```xml
```
or using default style theme attributes, styles and theme overlays (themes all
text fields but does not affect other components):
```xml
```
or using one of the styles in the layout (affects only this specific text
field):
```xml
```