InputArray

Features

• Add items onKeyDown enter
• Delete items onKeyDown backspace
• Animated shake notifies the user if they try to break required min/max array items
• The value returned by the field is an array [...]

Requirements

• Don't forget to $cast the field to array on the Model

Options

Extends BaseField

->type(string $type)

• Use any HTML5 input type except search and range.

->placeholder(string $type)

• Applied to each input.

->showEmptyItem($count = 1)

• Define how many empty items you want to show as default.
• Please note that this option has nothing to do with validation!
  If you show empty fields and set the field to be required, it might be confusing to the user when they get an error when they submit the form.

->noDefer()

• Not recommended: Add this option to @entangle (sync the field value, with Livewire) on every keystroke.

->minItems(int $min = 1)

• Require minimum items, prevents the user from deleting input items.

->maxItems(int $max = 0)

• Allow max items, prevents the user from adding input items.
• 0 equals no limitation

Example

InputArray::make('Utterances', 'utter')
    ->type('text') //any html5 type except 'search' and 'range'
    ->minItems(2) //Minimum items allowed
    ->maxItems(4) //Max items allowed
    // ->noDefer() //you probably want to defer, else this option will trigger entangle on every keystroke!!
    ->placeholder('Utter something')
    ->rules('required|string'); //the rules apply to each input field

Blade component

<x-tall-input-array :field="$field" />

Styling

Extend Blade component (or override in config file)

Tanthammar\TallForms\Components\InputArray::class

Theme

/* Shares some styles with the Repeater field */

.tf-repeater-btn-size {
    @apply h-6 w-6 md:h-8 md:w-8;
}

.tf-repeater-delete-btn {
    @apply tf-text-danger;
}

.tf-repeater-add-button {
    @apply rounded shadow text-white tf-bg-primary;
}

.tf-repeater-add-button-size {
    @apply h-5 w-5 m-2;
}