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
  • Requirements
  • Methods
  • ->fields($fields = [ ])
  • ->wrapperClass(string $classes)
  • ->wrapperGrid(string $classes)
  • ->childColspan(int $cols)
  • ->childStacked()
  • ->childInline()
  • ->wire(string $wire_model_declaration)

Was this helpful?

  1. Fields
  2. Fields

KeyVal (array)

PreviousInputArrayNextRadio

Last updated 3 years ago

Was this helpful?

Requirements

  • Used for flat key => value paired fields. Usually stored in a json db column. (Same as a Laravel Nova KeyVal field).

  • Do not forget to $cast the field to array on the model.

Example from the image preview tab

KeyVal::make('Bio')->fields([
    Input::make('Profession')->help('Field help')->rules('required'),
    Input::make('Spouse')->rules('required'),
    Input::make('Pet')->help('Field help')->rules('required'),
    Input::make('Children')->rules('required'),
])->childColspan(6)

Nested example

KeyVal::make('Thing')->fields([
    KeyVal::make('Name')->labelClass('mb-0')->fields([
        Input::make('English', 'en')->colspan(6)->labelClass('font-medium capitalize my-0', true)->rules('required'),
        Input::make('Swedish', 'sv')->colspan(6)->labelClass('font-medium capitalize my-0', true)->rules('required'),
    ]),
    KeyVal::make('Description')->labelClass('mb-0')->fields([
        Trix::make('English', 'en')->labelClass('font-medium capitalize my-0', true)->rules('required'),
        Trix::make('Swedish', 'sv')->includeExternalScripts()->labelClass('font-medium capitalize', true)->rules('required'),
    ]),
    KeyVal::make('Other Attribute')->labelClass('mb-0')->fields([
        Input::make('Something')->labelClass('font-medium capitalize my-0', true)->rules('required'),
        Select::make('Multi select in keyval')->multiple()->options([1 => 'One', 2 => 'Two'], false),
        Checkboxes::make('Checkboxes in keyval')->options(['One' => '1', 'Two' => '2'])->default(['1']),
        KeyVal::make('Level 3')->labelClass('mb-0')->fields([
            Input::make('City')->colspan(6)->labelClass('font-medium capitalize my-0', true)->rules('required'),
            Input::make('Country')->colspan(6)->labelClass('font-medium capitalize my-0', true)->default('Sweden')->rules('required'),
        ]),
    ]),
])

There is no headless version of the KeyVal field. it is a plain blade view that iterates each child field.

Check the source in resources/views/includes/keyval-wrapper.blade.php if you want to reproduce something similar, manually.

Search for /* KeyVal */ in the theme file

Methods

->fields($fields = [ ])

  • Nested KeyVal fields are supported in multiple levels.

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

->wrapperClass(string $classes)

  • Applied to the outer wrapper surrounding KeyVal field group

  • Default: 'flex flex-col'

->wrapperGrid(string $classes)

  • Defines the css grid for the KeyVal field group

  • Default: 'sm:flex sm:grid sm:grid-cols-12 sm:gap-x-2 sm:gap-y-4'

->childColspan(int $cols)

  • Overrides nested $field->colspan()

  • Default 12 of 12 columns

  • If you set it on the Panel you do not have to set it on each nested field.

->childStacked()

  • Apply $field->stacked() to all nested fields, can be overridden in each field.

->childInline()

  • Apply $field->inline() to all nested fields, can be overridden in each field.

->wire(string $wire_model_declaration)

  • Override nested fields wire:model attribute.