Get Started

    Components

      Overview

      The TextField component is a versatile input element designed to capture user text input. This component is commonly used in forms, search bars, and anywhere user text input is required.

      Variants

      The TextField component supports several color variants to fit different design contexts. The available colors are:

      • Filled: A solid background color that provides a clear input area.
      • Outlined: A bordered input field that allows the background to show through, providing a more subtle appearance.

      Modes

      The TextField component can be used in different modes to suit various use cases. The available modes are:

      • Single Line: A standard text input that allows for a single line of text.
      • Multi Line: A text area that allows for multiple lines of text input, useful for longer entries.

      Leading Icon

      The TextField component can include a leading icon to enhance usability and provide visual cues. This is particularly useful for search fields or when indicating the type of input expected.

      API Reference

      TextField

      A versatile text input component that supports both single-line and multi-line text entry.

      Props

      NameTypeDefaultDescription
      namestringRequiredThe name attribute for the input field, also used as the label text
      variant"filled" | "outlined""filled"The visual variant of the text field
      mode"singleline" | "multiline""singleline"The input mode - single line for regular text, multi line for textarea
      iconstringundefinedIcon name to display as a leading icon

      Inherited Props

      The TextField component accepts different props based on its mode:

      • Single Line Mode: Accepts all standard HTML input element props
      • Multi Line Mode: Accepts all standard HTML textarea element props

      Notes

      • The name prop is required and serves as both the input name and label text
      • Multi-line mode automatically adjusts height based on content
      • The component includes built-in focus states and Material Design animations
      • Leading icons are sized appropriately for each mode (24px for single line)