Ctrlk

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 [...]

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

InputArray::make('Utterances', 'utter')
    ->type('text') //any html5 type except 'search' and 'range'
    ->minItems(2) //Minimum items allowed
    ->maxItems(4) //Max items allowed
    ->placeholder('Utter something')
    //->deferEntangle(false) //uncomment to validate on every keystroke!! (NOT recommended)
    ->rules('required|string'); //the rules apply to each input field

//Livewire component
public array $inputArray = [];

//blade view
<x-tall-input-array :field="InputArray::blade('Utterances', 'inputArray')
    ->type('text') //any HTML5 input type
    ->minItems(2)
    ->maxItems(4)
    ->placeholder('Utter something')
    ->errorMsg('Ouch, bad entry')
    ->default(['one', 'two'])"
/>

The errorClass is applied to the outer div surrounding the inputs on validation error

/* 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;
}

Methods

->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.

->deferEntangle(bool $state = true)

Not recommended to set this option to false because it will sync the field value, 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

PreviousPassword NextKeyVal (array)

Last updated 3 years ago

Was this helpful?