Text Field

Text fields collect user input by allowing them to enter and edit text.

Overview

Code

Anatomy

Usage Guidelines

Use a consistent size for input and selection components within the same form or layout to ensure alignment.

Use When

  • Capturing short, structured input like names, emails, or phone numbers.
  • Collecting precise or formatted information.
  • Enabling search functionality through typed queries.
  • Supporting forms or workflows that require user input.

Best Practices

  • Use clear and descriptive labels for each text field, and avoid overusing placeholder text.
  • Use the correct input type (e.g., email, number, password) to trigger appropriate mobile keyboards and browser validation.
  • Provide visual feedback, such as clear error or success messages, to guide users and prevent mistakes.
  • Limit character input where appropriate, especially for fields requiring specific formatting (e.g., phone numbers).

Sizes

Large (36px)

Label

Placeholder

Helper or Validation text

Medium (32px)

Label

Placeholder

Helper or Validation text

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2026 Zuora Inc.

Text Field

Text fields collect user input by allowing them to enter and edit text.

Overview

Code

Anatomy

Usage Guidelines

Use a consistent size for input and selection components within the same form or layout to ensure alignment.

Use When

  • Capturing short, structured input like names, emails, or phone numbers.
  • Collecting precise or formatted information.
  • Enabling search functionality through typed queries.
  • Supporting forms or workflows that require user input.

Best Practices

  • Use clear and descriptive labels for each text field, and avoid overusing placeholder text.
  • Use the correct input type (e.g., email, number, password) to trigger appropriate mobile keyboards and browser validation.
  • Provide visual feedback, such as clear error or success messages, to guide users and prevent mistakes.
  • Limit character input where appropriate, especially for fields requiring specific formatting (e.g., phone numbers).

Sizes

Large (36px)

Label

Placeholder

Helper or Validation text

Medium (32px)

Label

Placeholder

Helper or Validation text

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2026 Zuora Inc.

Text Field

Text fields collect user input by allowing them to enter and edit text.

Overview

Code

Anatomy

Usage Guidelines

Use a consistent size for input and selection components within the same form or layout to ensure alignment.

Use When

  • Capturing short, structured input like names, emails, or phone numbers.
  • Collecting precise or formatted information.
  • Enabling search functionality through typed queries.
  • Supporting forms or workflows that require user input.

Best Practices

  • Use clear and descriptive labels for each text field, and avoid overusing placeholder text.
  • Use the correct input type (e.g., email, number, password) to trigger appropriate mobile keyboards and browser validation.
  • Provide visual feedback, such as clear error or success messages, to guide users and prevent mistakes.
  • Limit character input where appropriate, especially for fields requiring specific formatting (e.g., phone numbers).

Sizes

Large (36px)

Label

Placeholder

Helper or Validation text

Medium (32px)

Label

Placeholder

Helper or Validation text

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2026 Zuora Inc.

On This Page

Text Field

Text fields collect user input by allowing them to enter and edit text.

Overview

Code

Anatomy

Usage Guidelines

Use a consistent size for input and selection components within the same form or layout to ensure alignment.

Use When

  • Capturing short, structured input like names, emails, or phone numbers.
  • Collecting precise or formatted information.
  • Enabling search functionality through typed queries.
  • Supporting forms or workflows that require user input.

Best Practices

  • Use clear and descriptive labels for each text field, and avoid overusing placeholder text.
  • Use the correct input type (e.g., email, number, password) to trigger appropriate mobile keyboards and browser validation.
  • Provide visual feedback, such as clear error or success messages, to guide users and prevent mistakes.
  • Limit character input where appropriate, especially for fields requiring specific formatting (e.g., phone numbers).

Sizes

Large (36px)

Label

Placeholder

Helper or Validation text

Medium (32px)

Label

Placeholder

Helper or Validation text

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2026 Zuora Inc.

On This Page

Text Field

Text fields collect user input by allowing them to enter and edit text.

Overview

Code

Anatomy

Usage Guidelines

Use a consistent size for input and selection components within the same form or layout to ensure alignment.

Use When

  • Capturing short, structured input like names, emails, or phone numbers.
  • Collecting precise or formatted information.
  • Enabling search functionality through typed queries.
  • Supporting forms or workflows that require user input.

Best Practices

  • Use clear and descriptive labels for each text field, and avoid overusing placeholder text.
  • Use the correct input type (e.g., email, number, password) to trigger appropriate mobile keyboards and browser validation.
  • Provide visual feedback, such as clear error or success messages, to guide users and prevent mistakes.
  • Limit character input where appropriate, especially for fields requiring specific formatting (e.g., phone numbers).

Sizes

Large (36px)

Label

Placeholder

Helper or Validation text

Medium (32px)

Label

Placeholder

Helper or Validation text

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2026 Zuora Inc.