TALL-forms
  • TALL-forms
  • Installation
    • Quickstart: Artisan cmd
    • Manual installation
      • Package
      • Translations
      • Css & Theme
      • Javascript
      • Tailwind
      • Laravel Mix
      • Wrapper view
      • Laravel Jetstream/Breeze
  • Upgrade v7 to v8
    • Configuration changes
    • Component & Field changes
    • Blade view changes
    • Notification changes
    • Styling changes
  • Concept
    • Configuration
    • Validation
    • Styling
    • Icons
    • Javascript
    • Layout vs Wrapper
    • Model binding
    • Manually saving data
    • Extend Blade Components
  • Create Forms
    • Form Data
    • Form Types
      • Standard form
      • As modal
      • Without buttons
      • Fields only
      • Headless
    • Form attributes
    • Form buttons
    • Form slots
    • Form methods
    • Lifecycle hooks
    • Render a form
    • Mass generate
  • Fields
    • Declaration
    • Labels
    • Field Slots
    • Field methods
    • Custom field attributes
    • Conditional field
    • Custom view
    • Custom field
    • Custom Livewire component
    • Relations
    • Fields
      • Checkbox
      • Checkboxes
      • FileUpload
      • Honeypot
      • ImageCropper
      • Input
      • Password
      • InputArray
      • KeyVal (array)
      • Radio
      • Range
      • Repeater (array)
      • Search
      • Select & Multiselect
      • Tags
      • TagsSearch
      • Textarea
      • Trix
      • SpatieTags
    • Sponsor Fields
      • More Inputs
      • CKEditor
      • DatePicker
      • Heading
      • Markdown
      • Panels
      • SearchList
      • SelectOptGroup
      • Tabs
      • Trix, file-uploads
  • Blade components
    • Notifications
    • Label wrapper
    • Button
    • Modal blade component
    • Modal form blade component
  • Examples
    • Input examples
    • Array fields example
Powered by GitBook
On this page
  • Features
  • Methods
  • ->type(string $type)
  • ->placeholder(string $type)
  • ->showEmptyItem($count = 1)
  • ->deferEntangle(bool $state = true)
  • ->minItems(int $min = 1)
  • ->maxItems(int $max = 0)

Was this helpful?

  1. Fields
  2. Fields

InputArray

PreviousPasswordNextKeyVal (array)

Last updated 3 years ago

Was this helpful?

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