Text Field

input

Text fields let users enter and edit text. They provide a container with labels for user input.

Variants

Filled

Default

Text field with a filled container background

Outlined

Text field with an outlined border

Properties

Name Type Required Default Description
variant enum - filled Visual style of the text field
label string - - The floating label text
value string - - The current input value
type enum - text The input type
disabled boolean - - Whether the text field is disabled
readonly boolean - - Whether the text field is read-only
required boolean - - Whether the field is required for form submission
error boolean - - Whether the field is in an error state
errorText string - - Error message to display when in error state
supportingText string - - Helper text displayed below the field
placeholder string - - Placeholder text when empty
prefixText string - - Text displayed before the input value
suffixText string - - Text displayed after the input value
maxLength number - - Maximum number of characters allowed
minLength number - - Minimum number of characters required
pattern string - - Regex pattern for validation
rows number - 2 Number of visible rows for textarea type
name string - - The HTML name for form submission

States

enabled

Default interactive state

disabled

Non-interactive state

focused

Input is focused

error

Validation error state

readonly

Value visible but not editable

Accessibility

Role: textbox
Keyboard Support:
  • Tab - Move focus into/out of the field
  • Enter - Submit form (single-line) or new line (textarea)
Screen Reader Notes: Announce label, current value, error state, and supporting text. For external labels, use aria-label.

LLM Context

Intent: Capture user text input for forms and data entry
Anti-Patterns:
  • Text field without label or aria-label
  • Using placeholder as the only label
  • Error state without error message
  • Required field without visual indicator
  • Disabled field with important information
Example Usage: 
<md-filled-text-field label="Email" type="email"></md-filled-text-field>
<md-outlined-text-field label="Password" type="password"></md-outlined-text-field>
<md-filled-text-field label="Comments" type="textarea" rows="4"></md-filled-text-field>
<md-outlined-text-field label="Phone" type="tel" prefix-text="+1"></md-outlined-text-field>