This demo lets you preview the text field component, its variations, and configuration options. Each tab displays a different type of text field.
Usage
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
Principles
Discoverable
Text fields should stand out and indicate that users can input information.
Clear
Text field states should be clearly differentiated from one another.
Efficient
Text fields should make it easy to understand the requested information and to address any errors.
Types
Text fields come in two forms: filled and outlined.
Text fields come in two types:
Filled text fields
Outlined text fields
Both types of text fields use a container to provide a clear affordance for interaction, making the fields discoverable in layouts.
Choosing the right text field
Both types of text fields provide the same functionality, so the type of text field you use can depend on style alone. Choose the type...
Both types of text fields provide the same functionality, so the type of text field you use can depend on style alone.
Choose the type that:
Works best with your app’s visual style
Best accommodates the goals of your UI
Is most distinct from other components (like buttons) and surrounding content
Both types of text fields in one UI
If both types of text fields are used in a single UI, they should be used consistently within different sections, and not intermixed within the same region. For example, you could use outlined text fields in one section and filled text fields in another.
Anatomy
Container
Containers improve the discoverability of text fields by creating contrast between the text field and surrounding content. A text field container has a fill and...
Containers improve the discoverability of text fields by creating contrast between the text field and surrounding content.
Fill and stroke
A text field container has a fill and a stroke (either around the entire container, or just the bottom edge). The color and thickness of a stroke can change to indicate when the text field is active.
Rounded corners
The container of an outlined text field has rounded corners, while the container of a filled text field has rounded top corners and square bottom corners.
Label text
Label text is used to inform users as to what information is requested for a text field. Every text field should have a label. Label...
Label text is used to inform users as to what information is requested for a text field. Every text field should have a label.
Label text should be aligned with the input line, and always visible. It can be placed in the middle of a text field, or rest near the top of the container.
Required text indicator
To indicate that a field is required, display an asterisk (*) next to the label text and mention near the form that asterisks indicate required fields.
If some fields are required, indicate all required ones
If most fields are required, indicate optional fields by displaying the word “optional” in parentheses next to the label text
If required text is colored, that color should also be used for the asterisk
Input text
Input text is text the user has entered into a text field. Input text is text entered by the user. A cursor indicates the current...
Assistive elements
Assistive elements provide additional detail about text entered into text fields. Helper text conveys additional guidance about the input field, such as how it will...
Error text
For text fields that validate their content (such as passwords), replace helper text with error text when applicable. Swapping helper text with error text helps prevent new lines of text from being introduced into a layout, thus bumping content to fit it.
If only one error is possible, error text describes how to avoid the error
If multiple errors are possible, error text describes how to avoid the most likely error
Icons
Icons in text fields are optional. Text field icons can describe valid input methods (such as a microphone icon), provide affordances to access additional functionality...
Icons in text fields are optional. Text field icons can describe valid input methods (such as a microphone icon), provide affordances to access additional functionality (such as clearing the content of a field), and can express an error.
Leading and trailing icons change their position based on LTR or RTL contexts.
As layouts adapt to larger screens and form factors, apply scalable container dimensions to text fields.
As layouts adapt to larger screens and form factors, apply flexible container dimensions to text fields. Set minimum and maximum values for margins, padding, and container dimensions as layouts scale so that typography adjusts for better reading experiences.
As text fields expand within fluid layouts, avoid maintaining fixed margins and typography properties because this can lead to extra long text fields. Text fields should not, for example, span the full width of a large screen.
Filled text field
Usage
Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components.
Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components.
Dense text fields
Dense text fields enable users to scan and take action on large amounts of information.
Dense text fields enable users to scan and take action on large amounts of information.
Text fields without labels
A text field doesn’t require a label if the field’s purpose is indicated by a separate, adjacent label.
A text field doesn't require a label if the field's purpose is indicated by a separate, adjacent label.
Prefix and suffix text
States
Filled text fields (baseline)
Filled text fields without labels
Filled text fields with prefix text
Filled text fields with suffix text
Outlined text field
Usage
Outlined text fields have less visual emphasis than filled text fields. When they appear in places like forms, where many text fields are placed together,...
Outlined text fields 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.
Dense text fields
Dense text fields enable users to scan and take action on large amounts of information.
Dense text fields enable users to scan and take action on large amounts of information.
Text fields without labels
A text field doesn’t require a label if the field’s purpose is indicated by a separate, independent label.
A text field doesn't require a label if the field's purpose is indicated by a separate, independent label.
Prefix and suffix text
States
Outlined text field (baseline)
Outlined text field without labels
Outlined text field with prefix text
Outlined text field with suffix text
Input types
Text fields can display user input in the following ways:
Single line text fields display only one line of text
Multi-line text fields grow to accommodate multiple lines of text
Text areas are fixed-height fields
Read-only fields
Read-only text fields display pre-filled text that the user cannot edit. A read-only text field is styled the same as a regular text field and is clearly labeled as read-only.
Research
Material Design conducted two studies with around 600 participants to understand characteristics of text field usability and user preferences for text field design. The studies measured a user’s ability to scan and find a text field as well as the ability to identify the types of text fields.
Research showed the following are best practices that can be adopted to improve the usability of text fields:
Use an enclosed text field with a rectangular box, rather than a single underline to indicate a text field
Use either a semi-transparent fill with a bottom line or a fully transparent fill with an opaque stroke for the text field box
Place label text within the boundary of a text field box
Ensure text field outlines or strokes meet 3:1 minimum color contrast ratio to the background
This personal finance app's filled text fields have been customized using Material Theming. Areas of customization include color and typography. Rally is a personal finance...
This personal finance app's filled text fields have been customized using Material Theming. Areas of customization include color and typography.
Rally's filled text fields use custom corner shapes.
Element
Category
Attribute
Value
Container
Small component
Family Size
Cut 0;0;0;0 dp
Crane Material Theme
This travel app's outlined text fields have been customized using Material Theming. Areas of customization include color and typography. Crane is a travel app that...
This travel app's outlined text fields have been customized using Material Theming. Areas of customization include color and typography.
Crane's outlined text fields use custom corner shapes.
Element
Category
Attribute
Value
Container
Small component
Family Size
Cut 4;4;4;4 dp
Specs
Filled text field
16dp #00000099 12dp #00000099 #0000a R0 G0 B10 Elevation 0dp Top left, top right corner Rounded: 4dp All measurements are displayed in device-independent pixels (dps)...
Outlined text field
12dp #00000099 All measurements are displayed in device-independent pixels (dps) 16dp #3c4043 12dp #6200ee #00000060 R0 G0 B0 A0.38 Elevation 0dp All corners Rounded: 4dp...
New
Available in Jetpack Compose
Text fields are available in the Material library for Jetpack Compose. Visit the library reference documentation on Android Developers to get started.
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
page.
xxxxxxxxxx
Note: A text field is composed of a TextInputLayout and a
TextInputEditText as a direct child. 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 on it.
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.
Adding a leading icon to a text field
xxxxxxxxxx
Adding a trailing icon to a text field
Password toggle:
If set, an icon is displayed to toggle between the password being displayed as
plain-text or disguised (when the TextInputEditText is set to display a
password).
xxxxxxxxxx
Clear text:
If set, an icon is displayed when text is present and pressing it clears the
input text.
xxxxxxxxxx
Custom icon:
It is possible to set a custom Drawable as the text field's trailing icon via
app:endIconMode="custom". You should specify a drawable and content
description for the icon, and, optionally, specify custom behaviors.
In the layout:
xxxxxxxxxx
Optionally, in code:
xxxxxxxxxx
Note: You should opt to use the EndIconMode API instead of setting an
end/right compound Drawable on the TextInputEditText. The same applies to
the now-deprecated passwordToggle* attributes.
Note: Non-null error text will replace any existing helper text.
Adding a prefix/suffix to a text field
xxxxxxxxxx
Text field dimensions
The recommended default android:layout_width is 245dp.
By default, text fields have a maximum width of 488dp, and a minimum width of
56dp for layouts without a label. If a label is present, the minimum width
recommended is 88dp. android:minWidth and android:maxWidth should be set
on the TextInputLayout instead of on the TextInputEditText to avoid
unintended behaviors.
You can override those values in a custom style that inherits from a
TextInputLayout style or directly on the layout:
xxxxxxxxxx
Note: The android:layout_width of the TextInputLayout should be
wrap_content in order for those minimum and maximum dimensions to be used.
Using text fields programmatically
If you construct the TextInputEditText 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.
A filled text field has a filled container, input text, a label, an activation
indicator, optional helper/error text and optional leading/trailing icons.
Container
Leading icon
Label
Input text
Trailing icon
Activation indicator
Helper/error/counter text
Prefix/suffix/placeholder (not shown)
Note: All the attributes on the tables below should be set on the
TextInputLayout, with the exception of the input text attributes (which should
be set on the TextInputEditText).
Outlined text fields
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.
An outlined text field has a stroked container, input text, a label, optional
helper/error text and optional leading/trailing icons.
Container
Leading icon
Label
Input text
Trailing icon
Helper/error/counter text
Prefix/suffix/placeholder (not shown)
Note: All the attributes on the tables below should be set on the
TextInputLayout, with the exception of the input text attributes (which should
be set on the TextInputEditText).
The following example shows filled and outlined text field types 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):
xxxxxxxxxx
or using default style theme attributes, styles and theme overlays (themes all
text fields but does not affect other components):
xxxxxxxxxx
or using one the style in the layout (affects only this text field):
xxxxxxxxxx
Note: When setting a materialThemeOverlay on a custom TextInputLayout
style, don't forget to set editTextStyle to either a
@style/Widget.MaterialComponents.TextInputEditText.* style or to a custom one
that inherits from that.
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.
No Android implementation guidance available
Using text fields
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components.
Filled text example
xxxxxxxxxx
Outlined text
Outlined text fields 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 example
xxxxxxxxxx
See here for more information on using the notched outline sub-component.
Note: Do not use mdc-line-ripple inside of mdc-text-fieldif you plan on using mdc-text-field--outlined. Line Ripple should not be included as part of the DOM structure of an outlined text field.
Other variations
Textarea
Filled
xxxxxxxxxx
Outlined
xxxxxxxxxx
Note: The mdc-text-field__resizer element may be omitted for a non-resizable textarea.
Text field without label
A text field doesn’t require a label if a separate but clear label indicator is already displayed adjacent to the text field.
Add class name mdc-text-field--no-label and remove the label element from the structure.
Filled
xxxxxxxxxx
Outlined
xxxxxxxxxx
Textarea
xxxxxxxxxx
Disabled text field
To disable the text field, add the disabled attribute to the <input> element and add the mdc-text-field--disabled class to the mdc-text-field element.
xxxxxxxxxx
Text field with helper text
The helper text provides supplemental information and/or validation messages to users. It appears on input field focus
and disappears on input field blur by default, or it can be persistent. Helper text should be rendered inside .mdc-text-field-helper-line element
which is immediate sibling of .mdc-text-field. See here for more information on using helper text.
xxxxxxxxxx
Text field with character counter
Character counter is used if there is a character limit. It displays the ratio of characters used and the total character limit.
Character counter should be rendered inside .mdc-text-field-helper-line element which is immediate sibling of .mdc-text-field.
See here for more information on using character counter.
xxxxxxxxxx
Multi-line text field (textarea) with character counter
A character counter can be associated with a textarea by including it in the
helper line. In this case, the counter will appear below the textarea, adjacent
to any helper text.
xxxxxxxxxx
Alternatively, the character counter can be placed in the textarea's body by
inserting the character counter below the textarea and adding the
mdc-text-field--with-internal-counter modifier class to the text field.
xxxxxxxxxx
Helper text and Character counter are optional subcomponents of text field that can co-exist independently.
It is recommended that .mdc-text-field and .mdc-text-field-helper-line elements have same width for correct layout.
Text field with prefix and suffix text
Prefix and suffix text can add context to a text field, such as a currency symbol prefix or a unit of mass suffix.
A prefix, suffix, or both can be added within the default or outlined variants of text fields.
xxxxxxxxxx
Note: Do not use mdc-text-field--affix within mdc-text-field--textarea.
Text field with leading and trailing icons
Leading and trailing icons can be added within the default or outlined variant of MDC Text Field as visual indicators as
well as interaction targets. See here for more information on using icons.
Other features
HTML5 validation
MDCTextFieldFoundation provides validity styling by using the :invalid and :required attributes provided
by HTML5's form validation API.
xxxxxxxxxx
MDCTextFieldFoundation automatically appends an asterisk to the label text if the required attribute is set.
Pre-filled
When dealing with JS-driven text fields that already have values, you'll want to ensure that you
render mdc-text-field with the mdc-text-field--label-floating modifier class, as well as
mdc-floating-label with the mdc-floating-label--float-above modifier class. This will
ensure that the label moves out of the way of the text field's value and prevents a Flash Of
Un-styled Content (FOUC).
xxxxxxxxxx
Baseline alignment
By default, text fields will be aligned with other elements relative to their
baseline. The input text's baseline is used to determine where a text field
should be aligned to and is different between variants. To force alignment to
the text field's container instead of its baseline, align the element using
flexbox.
xxxxxxxxxx
API
CSS classes
CSS Class
Description
mdc-text-field
Mandatory.
mdc-text-field--filled
Styles the text field as a filled text field.
mdc-text-field--outlined
Styles the text field as an outlined text field.
mdc-text-field--textarea
Indicates the text field is a <textarea>.
mdc-text-field--disabled
Styles the text field as a disabled text field.
mdc-text-field--with-leading-icon
Styles the text field as a text field with a leading icon.
mdc-text-field--with-trailing-icon
Styles the text field as a text field with a trailing icon.
mdc-text-field--focused
Styles the text field as a text field in focus.
mdc-text-field--no-label
Styles the text field that has no label.
mdc-text-field--end-aligned
Styles the text field with an end-aligned input.
mdc-text-field--label-floating
Styles the text field with a floating label and pre-filled or focused value.
mdc-text-field--ltr-text
Styles the text field's text elements (input, prefix, and suffix) as LTR even when the direction is RTL. Useful for RTL languages that use LTR for fractional notations.
mdc-text-field--with-internal-counter
Styles the text area as a text area with an internal character counter.
mdc-text-field-helper-line
Styles the container of helper text and character counter elements.
Sass mixins
To customize the colors of any part of the text-field, use the following mixins. We recommend you apply
these mixins within CSS selectors like .foo-text-field:not(.mdc-text-field--focused) to select your unfocused text fields,
and .foo-text-field.mdc-text-field--focused to select your focused text-fields. To change the invalid state of your text fields,
apply these mixins with CSS selectors such as .foo-text-field.mdc-text-field--invalid.
NOTE: the mdc-line-ripple-color mixin should be applied from the not focused class foo-text-field:not(.mdc-text-field--focused)).
Mixins for all text fields
Mixin
Description
ink-color($color)
Customizes the color of the text entered into an enabled text field.
placeholder-color($color)
Customizes the color of the placeholder in an enabled text field.
disabled-ink-color($color)
Customizes the color of the entered text in a disabled text field.
disabled-placeholder-color($color)
Customizes the color of the placeholder in a disabled text field.
label-color($color)
Customizes the text color of the label in an enabled text field.
disabled-label-color($color)
Customizes the text color of the label in a disabled text field.
caret-color($color)
Customizes the color of the cursor caret of the text field.
prefix-color($color)
Customizes the color of the prefix text of an enabled text field.
disabled-prefix-color($color)
Customizes the color of the prefix text of a disabled text field.
suffix-color($color)
Customizes the color of the suffix text of an enabled text field.
disabled-suffix-color($color)
Customizes the color of the suffix text of a disabled text field.
Customizes the duration and optional timing function for the floating label's "float" transition.
Mixins for filled text field and textarea
Mixin
Description
fill-color($color)
Customizes the background color of the text field or textarea when enabled.
disabled-fill-color($color)
Customizes the background color of the text field or textarea when disabled.
Mixins for filled text field only
Mixin
Description
shape-radius($radius, $rtl-reflexive)
Sets rounded shape to boxed text field variant with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.
bottom-line-color($color)
Customizes the text field bottom line color.
hover-bottom-line-color($color)
Customizes the hover text field bottom line color.
disabled-bottom-line-color($color)
Customizes the disabled text field bottom line color.
line-ripple-color($color)
Customizes the color of the default line ripple of the text field.
density($density-scale)
Sets density scale for default text field variant. Supported density scale values -4, -3, -2, -1, 0.
height($height)
Sets height of default text field variant.
Mixins for outlined text field and textarea
Mixin
Description
focused-outline-color($color)
Customizes the outline border color when the text field or textarea is focused.
hover-outline-color($color)
Customizes the outline border color when the text field or textarea is hovered.
disabled-outline-color($color)
Customizes the outline border color when the text field or textarea is disabled.
outline-color($color)
Customizes the border color of the outlined text field or textarea.
Mixins for outlined text field only
Mixin
Description
outline-shape-radius($radius, $rtl-reflexive)
Sets rounded shape to outlined text field variant with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.
outlined-density($density-scale)
Sets density scale for outlined text field (Excluding outlined text field with leading icon). Supported density scale values -4, -3, -2, -1, 0.
outlined-height($height)
Sets height of outlined text field variant (Excluding outlined text field with leading icon).
Sets density scale for outlined text field with leading icon. Supported density scale values -4, -3, -2, -1, 0.
outlined-with-leading-icon-height($height)
Sets height of outlined text field with leading icon variant.
Mixins for textarea only
Mixin
Description
textarea-shape-radius($radius, $rtl-reflexive)
Sets rounded shape to text area variant with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.
outlined-textarea-density($density-scale)
Sets density scale for outlined textarea. Supported density scale values -4, -3, -2, -1, 0.
textarea-min-rows($rows)
Sets the minimum number of rows for a textarea a textarea may be resized to.
MDCTextField properties and methods
Property
Value Type
Description
value
string
Proxies to the foundation's getValue/setValue methods.
disabled
boolean
Proxies to the foundation's isDisabled/setDisabled methods.
useNativeValidation
boolean (write-only)
Proxies to the foundation's setUseNativeValidation method.
valid
boolean
Proxies to the foundation's isValid/setValid methods.
helperTextContent
string (write-only)
Proxies to the foundation's setHelperTextContent method when set.
ripple
MDCRipple (write-only)
The MDCRipple instance for the root element that MDCTextField initializes; this only applies to the default Text Field, and is null for other variants.
leadingIconAriaLabel
string (write-only)
Proxies to the foundation's setLeadingIconAriaLabel method.
trailingIconAriaLabel
string (write-only)
Proxies to the foundation's setTrailingIconAriaLabel method.
leadingIconContent
string (write-only)
Proxies to the foundation's setLeadingIconContent method.
trailingIconContent
string (write-only)
Proxies to the foundation's setTrailingIconContent method.
prefixText
string
Gets or sets the text content of the prefix, if it exists.
suffixText
string
Gets or sets the text content of the suffix, if it exists.
In addition to the above, the following properties proxy to the input element's properties of the same name:
required
pattern
minLength
maxLength
min
max
step
Method Signature
Description
focus() => void
Focuses the input or textarea element.
layout() => void
Adjusts the dimensions and positions for all sub-elements.
Usage within frameworks
If you are using a JavaScript framework, such as React or Angular, you can create a Text Field for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCTextFieldAdapter
Method Signature
Description
addClass(className: string) => void
Adds a class to the root element.
removeClass(className: string) => void
Removes a class from the root element.
hasClass(className: string) => boolean
Returns true if the root element contains the given class name.
Sets the CSS transform-origin property to the given value on the text field's line ripple sub-element (if present).
hasOutline() => boolean
Determines whether the text field has an outline sub-element.
notchOutline(labelWidth: number) => void
Sets the width of the text field's notched outline sub-element.
closeOutline() => void
Closes the text field's notched outline sub-element.
MDCTextFieldAdapter.getNativeInput()
Returns an object representing the native text input element, with a similar API shape. We never alter the value within our code, however we do update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully.
Returns the idle outline element's computed style value of the given css property propertyName. The vanilla implementation achieves this via getComputedStyle(...).getPropertyValue(propertyName).
Sets whether to check native HTML validity state (true, default) or custom validity state when updating styles (false).
setValid(isValid: boolean)
Sets custom validity and updates styles accordingly. Note that native validation will still be honored subsequently unless setUseNativeValidation(false) is also called.
isValid() => boolean
Returns the component's current validity state (either native or custom, depending on how setUseNativeValidation() was configured).
isDisabled() => boolean
Returns whether or not the input is disabled.
setDisabled(disabled: boolean) => void
Updates the input's disabled state.
handleTextFieldInteraction(evt: Event) => void
Handles click and keydown events originating from inside the Text Field component.
Sets whether or not the textfield should validate its input when value changes.
getAutovalidate() => boolean
Whether or not the textfield should validate its input when value changes. true by default.
MDCTextFieldFoundation supports multiple optional sub-elements: helper text and icon. The foundations of these sub-elements must be passed in as constructor arguments to MDCTextFieldFoundation.
No Web implementation guidance available
Using text fields
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
Making text fields accessible
Flutter's text field component APIs supports both label text and helper text for accessibility.
decoration, inside decoration set the parameter border: disabledBorder, enabledBorder, errorBorder, focusedBorder, focusedErrorBorder
Stroke width
decoration, inside decoration set the parameter border: disabledBorder, enabledBorder, errorBorder, focusedBorder, focusedErrorBorder
Shape
decoration, inside decoration set the parameter border: disabledBorder, enabledBorder, errorBorder, focusedBorder, focusedErrorBorder
Elevation
N/A
Ripple color
N/A
Leading icon (optional) for filled text
Property
Icon
Use decoration, within decoration set the icon property
Color
When creating the icon property you can set the color parameter
Size
When creating the icon property you can set the size parameter
Gravity
N/A
Padding
N/A
Label text for filled text
Property
Label text
Use decoration, within decoration set labelText property
Typography
Use decoration, within decoration set labelStyle property
Color
Use decoration, within decoration set labelStyle property
Input text for filled text
Property
Label text
initialValue
Typography
style
Color
style
Trailing icon (optional) for filled text
Property
Icon
Use decoration, within decoration use suffixIcon property
Color
When creating the suffixIcon property you can set the color parameter
Size
When creating the suffixIcon property you can set the size parameter
Gravity
N/A
Padding
N/A
Activation indicator for filled text
Property
Stroke color
Use decoration, within decoration set FocusBorder
Stroke width
Use decoration, within decoration set FocusBorder
Ripple color
N/A
Helper text (optional) for filled text
Property
Label text
Use decoration, within decoration set helperText property
Typography
Use decoration, within decoration set helperStyle property
Color
Use decoration, within decoration set helperStyle property
Styles for filled text
Property
Default style
style
Icon style
Within style set icon
Outlined text
Outlined text fields 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.
Material iOS text field offerings either inherit from UITextField or they contain UITextView instances. Both of these classes are accessible by default, and generally work out of the box with VoiceOver. However, the text fields we provide make use of floating labels above the text and assistive labels below the text, which makes the VoiceOver behavior of our text fields slightly different. If accessibilityLabel is not explictly set on a single-line text field or multi-line text area, the accessibilityLabel that VoiceOver reads is a concatenation of the floating label text, the entered text, and the assistive label text. If accessibilityLabelis set, the screen reader will read whatever it is set to. If you would like fine-grained control over what VoiceOver reads for these classes it is probably best to set the accessibilityLabel yourself.
Material iOS text fields consist of both single-line and multi-line offerings in both filled and outlined styles. The single-line text fields are MDCFilledTextField and MDCOutlinedTextField. The multi-line text fields (text areas) are MDCFilledTextArea and MDCOutlinedTextArea. Because these classes make use of things like floating labels and assistive labels, their layout considerations are different than those of UITextField and UITextView. Where UITextField and UITextView can be whatever height a developer wants them to be, these classes have heights that they need to be in order to look correct. The process for ensuring that instances of these classes are sized correctly depends on whether one is in an Auto Layout or Manual Layout environment. In an Auto Layout environment, the text field or text area's preferred height will be reflected in -intrinsicContentSize, and the user will probably not have to do anything other than set a width constraint on the view to ensure that the preferred height is achieved. In a Manual Layout environment, standard methods like -sizeThatFits: or -sizeToFit must be used to inform the frames of the text field. These methods assume that the view already has a preferred width, and that any relevant APIs related to preferred number of lines have been set.
Filled text field
Filled text fields
have more visual emphasis than outlined text fields, making them stand out when
surrounded by other content and components.
Single-line filled text field
To set up a single-line filled text field using MDCFilledTextField, do the following:
textArea.textView.text="This is a filled text area with enough text to span two lines."
textArea.leadingAssistiveLabel.text="This is helper text"
textArea.sizeToFit()
view.addSubview(textArea)
Objective-C
xxxxxxxxxx
Anatomy and key properties
A filled text field has a filled container, input text, a label, an activation indicator, optional helper/error text and optional leading/trailing icons. This applies to both text fields and text areas.
Outlined text fields
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.
Single-line outlined text field
To set up a single-line outlined text field using MDCOutlinedTextField, do the following:
Text fields and text areas support Material Theming using a Container Scheme. The filled and outlined text fields and text areas each have default theming methods and theming methods intended to convey an error state. Learn more about theming extensions. Below are some screenshots of filled and outlined text fields using the Shrine theme:
In order to achieve something like the examples shown above, add one of the relevant theming subspecs to your Podfile:
xxxxxxxxxx
pod 'MaterialComponents/TextControls+FilledTextAreasTheming'
pod 'MaterialComponents/TextControls+FilledTextFieldsTheming'
pod 'MaterialComponents/TextControls+OutlinedTextAreasTheming'
pod 'MaterialComponents/TextControls+OutlinedTextFieldsTheming'