# Input

{% tabs %}
{% tab title="Preview" %}
The images are from Chrome, that has support for all HTML5 input types

![](https://3246461946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQWt7hBSh108moAc0Al%2F-MfMZ7sleBILhYnBA3cT%2F-MfMcAYL7SJsXbEfFBVr%2Finput.png?alt=media\&token=df143118-4746-4eef-8e6e-a773c64767f6)
{% endtab %}

{% tab title="Component" %}

### Text input

```php
Input::make('Name')
```

### Any HTML5 input type

```php
Input::make('Price')->type('number')
```

####

#### More examples, see [Input Examples](https://tina-hammar.gitbook.io/tall-forms/examples/input-examples)

{% endtab %}

{% tab title="Headless" %}

#### Examples

```markup
//In Livewire
public string $suffixInput = '';
public string $simpleInput = '';

//in blade view
<x-tall-input :field="Input::blade('suffixInput')->wire('lazy')->prefix('Hi')->suffix('bye')"/> 
<x-tall-input :field="Input::blade('simpleInput')->wire('defer')"/>
```

**Observe** that the Chrome browser has support for all date field types but other browsers may give you a non-user-friendly input.
{% endtab %}

{% tab title="Styling" %}

### Tip

You can add a pseudo class,  `input:invalid { border: red solid 3px; }` or similar to your `app.css`. If you want to take advantage of the html5 pattern attribute.

Search for `form-input` and `/* Input */` in tall-theme.css
{% endtab %}
{% endtabs %}

## Additional methods

### ->type(string $type = 'text')

`$type` = [Html5 input type](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\
You can omit the `type()` method for text fields.

```php
Input::make('Name')
Input::make('Email')->type('email')
```

### ->autocomplete(string $autocomplete)

Sets the input [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute

```php
Input::make('Password')->type('password')->autocomplete('new-password')
```

### ->prefix(string $prefix)

Sets a prefix text displayed in front of the field, with a gray background.

```php
Input::make('Url')->type('url')->prefix('https://')
```

### ->suffix(string $suffix)

Sets a suffix text displayed after the field, with a gray background.

```php
Input::make('Url')->type('url')->prefix('https://')->suffix('.com')
```

### ->required()

Adds the required attribute to the input field. Same as `rules('required')`

```php
Input::make('Name')->required()
```

### ->placeholder(string $placeholder)

```php
Input::make('Department')->placeholder('Example: Sales, Marketing, Finance')
```

### `->step()` `->min()` `->max()`&#x20;

Not applicable on all field types

These methods apply the equivalent attribute to the input field, but have no effect on incompatible field types.

```php
->step(float|string $step)
->min(float|string $min)
->max(float|string $max)
```

Example, `<input type="number" step="2" min="5" max="10" />`

```php
 Input::make('Number')
    ->type('number')
    ->prefix('#')
    ->step(2)
    ->min(5)
    ->max(10)
    ->rules('required|integer')
```

![Input](https://github.com/tanthammar/tall-forms/wiki/PrefixSuffix.png)

## Icons

* Display an icon in front of the field on a grey background.
* Display an icon after the field on a grey background.
* The icon is placed before the prefix/suffix, if both are applied.
* The package provides three different ways to declare icons

### Blade UI Kit icons

* **REQUIREMENTS**: Install and setup Blade UI Kit Icons
* `$icon` = "path/file-name". Depending on your Blade-ui-kit-icons config.
* Applied using the Blade-ui-kit @svg() directive

#### `->icon(string $blade_ui_icon_path)`

#### `->suffixIcon(string $blade_ui_icon_path)`&#x20;

```php
//requires Blade UI kit icons
Input::make('Url')->type('url')->icon('globe'); //before the input
Input::make('Url')->type('url')->suffixIcon('globe'); //after the input
```

### TallForms bundled icons

* **REQUIREMENTS**: Create a blade view that represents the icon.
* `$blade_file_path` = "path.blade-view".
* Applied using this package blade icon component. Available icons, see [Icons](https://tina-hammar.gitbook.io/tall-forms/concept/icons) page

#### `->tallIcon(string $blade_file_path)`&#x20;

#### `->suffixTallIcon(string $blade_file_path)`&#x20;

```php
Input::make('Url')->type('url')->tallIcon('path.blade-view'); //before the input
Input::make('Url')->type('url')->suffixTallIcon('path.blade-view'); //after the input
```

You can also use the bundled blade component anywhere in your project

`<x-tall-svg :path="path.blade-view" class="..." />`

### HTML icons

* `$html` = "< ... >".
* Applied using the `{!! $html !!}` blade directive

#### `->htmlIcon(string $html)`

#### `->suffixHtmlIcon(string $html)`

```php
Input::make('Url')->type('url')->htmlIcon('<i class="fas fa-globe-americas"></i>'); //before the input
Input::make('Url')->type('url')->suffixHtmlIcon('<i class="fas fa-globe-americas"></i>'); //after the input
```

## Examples

See [Input Examples](https://tina-hammar.gitbook.io/tall-forms/examples/input-examples)