> Source: https://laravilt.com/docs/forms/inputs/introduction

# Input Fields

Text-based input components for collecting user data.

## Available Components

| Component | Description | Vue Component |
|-----------|-------------|---------------|
| `TextInput` | Single-line text (email, password, tel, url) | `Input` from shadcn/ui |
| `Textarea` | Multi-line text | `Textarea` from shadcn/ui |
| `NumberField` | Numeric input with spin buttons | Custom `NumberInput` |
| `Hidden` | Hidden field | Native hidden input |
| `PinInput` | PIN/OTP code entry | `PinInput` from shadcn/ui |

## Common Methods

All input fields share these methods:

```php
<?php

use Laravilt\Forms\Components\TextInput;

TextInput::make('name')
    ->label('Full Name')
    ->placeholder('Enter name...')
    ->helperText('Your legal name')
    ->hint('As shown on ID')
    ->required()
    ->disabled()
    ->readonly()
    ->default('John')
    ->columnSpan(2);
```

## Vue Component Pattern

All inputs use the `FieldWrapper` component:

```vue
<template>
  <FieldWrapper
    :label="label"
    :errors="errors"
    :helper-text="helperText"
    :required="required"
  >
    <Input
      :model-value="modelValue"
      @update:model-value="$emit('update:modelValue', $event)"
      :placeholder="placeholder"
      :disabled="disabled"
    />
  </FieldWrapper>
</template>
```

## Related

- [TextInput](https://github.com/laravilt/laravilt/blob/HEAD/docs/forms/inputs/text-input) - Single-line text
- [Textarea](https://github.com/laravilt/laravilt/blob/HEAD/docs/forms/inputs/textarea) - Multi-line text
- [NumberField](https://github.com/laravilt/laravilt/blob/HEAD/docs/forms/inputs/number-field) - Numeric input
- [Hidden](https://github.com/laravilt/laravilt/blob/HEAD/docs/forms/inputs/hidden) - Hidden fields
- [PinInput](https://github.com/laravilt/laravilt/blob/HEAD/docs/forms/inputs/pin-input) - PIN/OTP input