---
title: 'Input'
description: 'Enhanced text input component with validation and consistent styling'
---

## Overview

HuxInput is a customizable text input component with consistent styling and extensive customization options. It provides a clean, modern text input with support for labels, hints, validation, icons, and different sizes while automatically adapting to light and dark themes.

## Basic Usage

### Simple Text Input
![Simple input](/images/input/input.png)

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

### Input with Icon
![Input with icon](/images/input/input-icon.png)

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

### Input with Helper Text
![Input with helper text](/images/input/input-helper.png)

```dart
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
![Input with error](/images/input/input-error.png)

```dart
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
![Enabled input](/images/input/input.png)
- Fully interactive with normal styling
- Responds to user input and focus

### Focused State
![Focused input](/images/input/input-focused.png)
- Enhanced border with primary color
- Visual focus indicator for accessibility

### Disabled State
![Disabled input](/images/input/input-disabled.png)
- Reduced opacity and non-interactive
- Maintains visual consistency

## Examples

<CardGroup cols={2}>
  <Card
    title="Form Building"
    icon="file-text"
    href="/examples/form-building"
  >
    See HuxInput in action within forms
  </Card>
  <Card
    title="Validation Patterns"
    icon="shield-check"
    href="/examples/validation"
  >
    Learn form validation best practices
  </Card>
</CardGroup>

## Related Components

- [HuxDateInput](/components/date-input) - Specialized date input component
- [HuxCheckbox](/components/checkbox) - Interactive checkbox component
- [HuxSwitch](/components/switch) - Toggle switch component
