---
url: /components/text-fields/overview.md
description: >-
  Text fields let users enter text into a UI. They typically appear in forms and
  dialogs.
---

# Text fields

Text fields let users enter text into a UI. They typically appear in forms and dialogs.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Text fields](/assets/d5f29b17-mrol2zzv-textfields.CWKrFoJk.webp)

* Make sure text fields look interactive
* Two variants: filled and outlined
* The text field’s [state](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") (blank, with input, error, etc) should be visible at a glance
* Keep labels and error messages brief and easy to act on
* Text fields commonly appear in forms and [dialogs](../dialogs/overview.md "Dialogs provide important prompts in a user flow.")

![2 variants of text fields, filled and outlined.](/assets/a58afce8-lx2u2h3p-1.DQIGhAzQ.webp)

1. Filled text field
2. Outlined text field

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#textfield) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/TextField.md) | Available |
| Implementation | [Web](https://github.com/material-components/material-web/blob/main/docs/components/text-field.md) | Available |

## Differences from M2

* Color: New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")

![A filled and outlined text field with M3 color mappings.](/assets/b83ff342-lx2u3e4d-2.ywsRWWCR.webp)

Text fields have new color mappings