Text Input

A form input component that creates a text input field with support for various HTML5 attributes, icons, and custom styling through the Uxmal Backoffice UI framework.

Basic Text Input

Creates a standard text input field with a name and placeholder.

Preview Code
php
Options
The Text component supports various configuration options that can be passed to the attribute method (e.g. attribute('placeholder', 'Enter your username')).
  • autocomplete: HTML5 autocomplete attribute for form auto-filling
  • maxlength: Maximum allowed character length for the input
  • minlength: Minimum required character length for the input
  • pattern: Regular expression pattern for input validation
  • placeholder: Placeholder text displayed when the input is empty
  • value: Initial value of the input
  • icon: Optional icon element to be displayed with the input
  • iconPosition: Position of the icon ('left' or 'right')
Text Input Examples
Here are examples of different ways to use the text input component.

Text Input with Validation

Creates a text input with HTML5 validation attributes for email format.

Preview Code
php

Text Input with Icon

Creates a text input with an icon positioned to the right.

Preview Code
php

Text Input with Label and Hint

Creates a text input with a label and hint text for additional guidance.

Preview Code
Please provide your first and last name
php

Text Input with Required

Creates a text input that is required for form submission.

Preview Code
php

Text Input with Disabled

Creates a text input that is disabled and cannot be interacted with.

Preview Code
php

Text Input with Readonly

Creates a text input that is readonly and cannot be edited.

Preview Code
php

Text Input with Custom Styling

Creates a text input with custom CSS classes and styles.

Preview Code
php

API

The text input component extends from the Input class so it has all its methods available.

Common alternative names: Text Field, Input Field, Text Box, Form Field, Input Box, Text Control

Types: Basic Text, Search Text, Password Text, Email Text, URL Text, Tel Text, Autocomplete Text, Rich Text

Principles

User Experience

Text inputs provide a simple and intuitive way for users to enter text data. They should be clearly labeled and appropriately sized for their expected content, with visual feedback for focus and validation states.

Validation

HTML5 validation attributes help ensure data quality and format conformance while providing immediate feedback to users. This reduces errors and improves data integrity.

Flexibility

Text components can be customized with various attributes, styles, and behaviors to suit different contexts and requirements while maintaining a consistent user experience.

Anatomy

Text Input Anatomy
  1. Container

    2. Outer wrapper div that holds all elements

  2. Label

    3. Optional text label describing the input's purpose

  3. Input Element

    4. The actual text input field

  4. Icon

    5. Optional icon element for visual enhancement or action

  5. Hint

    6. Optional helper text providing additional guidance

  6. Validation Feedback

    7. Visual indicators of validation status

Usage

Use text inputs for:

  • Single-line text entry
  • User information collection (names, emails, etc.)
  • Search functionality
  • Data filtering
  • Configuration settings
  • Form submissions
  • Command entry