Input

​

Overview

​

Basic Usage

​

Simple Text Input

HuxInput(
  label: 'Email',
  hint: 'Enter your email address',
)

​

Input with Icon

HuxInput(
  hint: 'Search for products...',
  prefixIcon: Icon(FeatherIcons.search),
)

​

Input with Helper Text

HuxInput(
  label: 'Password',
  hint: 'Enter your password',
  prefixIcon: Icon(FeatherIcons.lock),
  obscureText: true,
  helperText: 'Password must be at least 6 characters',
)

​

Input with Error State

HuxInput(
  label: 'Email',
  hint: 'Enter your email address',
  prefixIcon: Icon(FeatherIcons.mail),
  errorText: 'Please enter a valid email address',
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Email is required';
    }
    if (!value.contains('@')) {
      return 'Please enter a valid email address';
    }
    return null;
  },
)

​

Properties

​

Core Properties

• label - Optional field label text displayed above the input
• hint - Placeholder text displayed inside the input when empty
• controller - TextEditingController for managing input state
• onChanged - Callback triggered when the input value changes
• onSubmitted - Callback triggered when the user submits the input

​

Validation Properties

• validator - Form validation function that returns error text or null
• errorText - Custom error message (overrides validator output)
• helperText - Helper text displayed below the input

​

Icon Properties

• prefixIcon - Icon displayed at the beginning of the input
• suffixIcon - Icon displayed at the end of the input
• iconSize - Custom size for icons (default: 18px)

​

Behavior Properties

• obscureText - Whether to hide the input text (for passwords)
• enabled - Whether the input is interactive
• maxLines - Maximum number of text lines (default: 1)
• keyboardType - Type of keyboard to display
• textInputAction - Action button for the keyboard

​

Layout Properties

• width - Custom width (default: full width)

​

Styling & Dimensions

​

Fixed Dimensions

• Height: 40px (consistent across all inputs)
• Border Radius: 8px (rounded corners)
• Font Size: 14px with 1.4 line height

​

Padding & Spacing

• Horizontal Padding: 18px (left and right inside input)
• Vertical Padding: 12px (top and bottom inside input)
• Label Gap: 6px (space between label and input)

​

Icon Spacing

• Icon Size: 18px (default, customizable)
• Icon Outer Padding: 14px (space from edge to icon)
• Icon Inner Padding: 4px (space between icon and text)

​

Color System

​

Border Colors

• Default: HuxTokens.borderPrimary(context)
• Focused: HuxTokens.primary(context) with 50% opacity
• Error: HuxTokens.borderDestructive(context)
• Focused Error: HuxTokens.textDestructive(context) with 2px width
• Disabled: HuxTokens.borderSecondary(context)

​

Background Colors

• Enabled: HuxTokens.surfacePrimary(context)
• Disabled: HuxTokens.surfaceSecondary(context)

​

Text Colors

• Input Text: Inherits from theme with 14px font size
• Label Text: HuxTokens.textSecondary(context) with medium weight
• Icon Color: HuxTokens.iconSecondary(context)

​

States

​

Enabled State

• Fully interactive with normal styling
• Responds to user input and focus

​

Focused State

• Enhanced border with primary color
• Visual focus indicator for accessibility

​

Disabled State

• Reduced opacity and non-interactive
• Maintains visual consistency

​

Examples

​

Related Components

• HuxDateInput - Specialized date input component
• HuxCheckbox - Interactive checkbox component
• HuxSwitch - Toggle switch component