Repeater

Requirements

• Used for array fields. Usually stored in a json db column.
• Do not forget to $cast the field to array on the model.

Extends BaseField

Additional methods

->fields($fields = [ ])

You can use almost any field type, an error will be thrown if you use an invalid field.

->labelEachRow()

• Show all field slots (labels and more) on every iteration.
• Without this, the label will only be displayed above the first row.

->sortable()

Makes the array sortable. Show buttons to change the order of the array items. (See the image)

->wrapperClass(string $classes)

• Applied to the outer wrapper surrounding the Repeater field group
• Default: 'flex flex-col divide-y mb-2 rounded border'

->wrapperGrid(string $classes)

• Defines the css grid for the Repeater field group
• Default: 'flex-1 sm:grid sm:grid-cols-12 gap-x-2'

Example

 Repeater::make('Friends')->fields([
     Input::make('First name')
         ->afterLabel('After Label slot')
         ->rules('required')
         ->colspan(6),
     Input::make('Last name')
         ->afterLabel('Best slot to display field help')
         ->colspan(6)
         ->rules('required'),
 ])->sortable()
 ->help('Click plus to add a friend'),
])

Blade component

There is no blade component for the Repeater field, it is a plain blade view that wraps each field.

Styling

Apart from dynamic styling mentioned above, you can alter the styling in the theme.

/* Repeater */
    .tf-repeater-root {
        @apply w-full my-2;
    }
    .tf-repeater-wrapper {
        @apply flex flex-col divide-y mb-2 rounded border;
    }
    .tf-repeater-wrapper-outer {
        @apply flex flex-col sm:flex-row px-2 sm:space-x-3 items-center py-2;
    }
    .tf-repeater-wrapper-grid {
        @apply flex-1 sm:grid sm:grid-cols-12 gap-x-2;
    }
    .tf-repeater-btns-wrapper {
        @apply my-4 sm:my-0 flex-shrink space-x-1 items-center justify-end;
    }
    .tf-repeater-btn-size {
        @apply h-8 w-8;
    }
    .tf-repeater-sorter-color {
        @apply text-gray-400;
    }
    .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;
    }

You can also change the default blade views for the icons in the config file.

//icons
    'arrow-up-icon' => 'icons.cheveron-outline-up',
    'arrow-down-icon' => 'icons.cheveron-outline-down',
    'trash-icon' => 'icons.close-outline',