TextControls

TextControls are controls used for text input that make use of classes like UITextField and UITextView.

Design & API documentation

Table of contents

• Overview
• Installation
  • Installation with CocoaPods
  • Importing
• Usage
  • Text fields
• Theming
  • Theming
• Examples
  • Creating a text field

Overview

At this time, the only text control we offer is the text field. There are three text field classes:

Installation

Installation with CocoaPods

Add any of the following to your Podfile, depending on which TextControl target you're interested in:

pod 'MaterialComponents/TextControls+FilledTextFields'
pod 'MaterialComponents/TextControls+FilledTextFieldsTheming'
pod 'MaterialComponents/TextControls+OutlinedTextFields'
pod 'MaterialComponents/TextControls+OutlinedTextFieldsTheming'

Then, run the following command:

pod install

Importing

To use TextControls in your code, import the appropriate MaterialTextControls umbrella header (Objective-C) or MaterialComponents module (Swift).

Swift

import MaterialComponents.MaterialTextControls_FilledTextFields
import MaterialComponents.MaterialTextControls_FilledTextFieldsTheming
import MaterialComponents.MaterialTextControls_OutlinedTextFields
import MaterialComponents.MaterialTextControls_OutlinedTextFieldsTheming

Objective-C

#import "MaterialTextControls+FilledTextFields.h"
#import "MaterialTextControls+FilledTextFieldsTheming.h"
#import "MaterialTextControls+OutlinedTextFields.h"
#import "MaterialTextControls+OutlinedTextFieldsTheming.h"

Usage

Text fields

The largest difference between MDCTextControl text fields and UITextFields from a usability standpoint relates to the sizing behavior of MDCTextControl text fields. Where UITextField can be whatever height a user wants it to be, MDCTextControl text fields have heights that they need to be in order to look correct. The process for ensuring that MDCTextControl text fields have their preferred heights depends on whether one is in an Auto Layout or Manual Layout environment. In an Auto Layout environment, the text field's preferred height will be reflected in intrinsicContentSize, and the user will not have to do anything other than set a width constraint on the text field 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 text field already has the preferred width.

Theming

Theming

You can theme a text field to match the Material Design style by importing a theming extension. The content below assumes you have read the article on Theming.

First, import the text field theming extension and create a text field.

Swift

import MaterialComponents.MaterialTextControls_OutlinedTextFieldsTheming

let textField = MDCOutlinedTextField()

Objective-C

#import <MaterialComponents/MaterialTextControls+FilledTextFieldsTheming.h>

MDCFilledTextField *filledTextField = [[MDCFilledTextField alloc] init];

Then pass a container scheme to one of the theming methods on the theming extension.

Swift

filledTextField.applyTheme(withScheme: containerScheme)

Objective-C

[self.filledTextField applyThemeWithScheme:self.containerScheme];

Examples

Creating a text field

Swift

let estimatedFrame = ...
let textField = MDCFilledTextField(frame: estimatedFrame)
textField.label.text = "This is the floating label"
textField.leadingAssistiveLabel.text = "This is helper text"
textField.sizeToFit()
view.addSubview(textField)

Objective-C

CGRect estimatedFrame = ...
MDCOutlinedTextField *textField = [[MDCOutlinedTextField alloc] initWithFrame:estimatedFrame];
textField.label.text = "This is the floating label";
textField.leadingAssistiveLabel.text = "This is helper text";
[textField sizeToFit];
[view addSubview:textField];