Skip to content

Latest commit

 

History

History
332 lines (233 loc) · 8.71 KB

text-field-example-stub.md

File metadata and controls

332 lines (233 loc) · 8.71 KB

Instructions

  • Copy this file into the platform folder for this component
  • Rename the file to "<platform>-text-field.md"
  • Using text field
    • Add a link under Using text field to your getting started page if you have one
    • Insert installation and theming as appropriate for your platform
    • Insert any additional instructions that apply to your platform with a separte level 3 header
    • If you have no getting started links or instructions, delete the Using text field sections
  • Filled text ane Outlined-text sections
    • Add links to your platform

Text field

Text fields let users enter and edit text.

The text field class consists of the following types:

Text field example of both filled and outlined text from material.io

Using text fields

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

Installation

Filled text

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

Source code API:

  • <source class name>

The following examples shows a filled text field.

Copy the image to your platform's assets folder. Use a screenshot of your render.

filled text field for <platform> platform

* The label text should read "Label text"
* The input text should read "Input text"
* The helper text should read "Helper text"
* The text field should have a character counter of up to 20 characters
* The text field should have a "favorite" leading icon

Anatomy and key properties

<Placeholder diagram of outlined teld field attributes. Replace this text if/when there is an approved diagram\>

  1. Container
  2. Leading icon (optional)
  3. Label text
  4. Input text
  5. Trailing icon (optional)
  6. Activation indicator
  7. Helper text (optional)
Container attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Leading icon (optional) attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Label text attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Input text attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Trailing icon (optional) attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Activation indicator attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Helper text (optional) attributes
Attribute Related method(s) Default value
<label>
<label>
<label>

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

Source code API:

  • <source class name>

The following examples shows an outlined text field.

Copy the image to your platform's assets folder. Use a screenshot of your render. outlined text field for <> platform

* The label text should read "Label text"
* The input text should read "Input text"
* The error message text should read "Error message" and display the error message
* The text field should have a trailing error icon

Anatomy and key properties

<Placeholder diagram of outlined teld field attributes. Replace this text if/when there is an approved diagram\>

  1. Container
  2. Leading icon (optional)
  3. Label text
  4. Input text
  5. Trailing icon (optional)
  6. Activation indicator
  7. Helper text (optional)
Container attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Leading icon (optional) attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Label text attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Input text attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Trailing icon (optional) attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Activation indicator attributes
Attribute Related method(s) Default value
<label>
<label>
<label>
Helper text (optional) attributes
Attribute Related method(s) Default value
<label>
<label>
<label>

Theming text fields

Text fields support Material Theming and can be customized in terms of color, typography and shape.

Text field theming example

API and source code:

The following example shows filled and outlined text fields with Material Theming.

"Two text fields, one filled, one outlined, with green/black color theming and cut corners."

Implementing text field theming 
Include source code for two side-by-side examples using a green/black color theme similar to the one used in the [Android button example](https://github.com/mingjane-work/doc-material-components/blob/mingjane-doc-branch/button-examples/Android/android-button-example.md):

* Include one filled text field with the following:
    * The label text should read "Label text"
    * The input text should read "Input text"
    * The helper text should read "Helper text"
    * The text field should have a character counter of up to 20 characters
    * The text field should have a "favorite" leading icon
    * The container should have cut corners instead of rounded
* Include one outlined text field with the following:
    * The label text should read "Label text"
    * The input text should read "Input text"
    * The error message text should read "Error message" and display the error message
    * The text field should have a trailing error icon
    * The container should have cut corners instead of rounded