Skip to main content
The key-value component allows you to interact with one-dimensional key-value pairs.

​
Basic Usage

use Filament\Forms\Components\KeyValue;

KeyValue::make('metadata')

​
Available Methods

​
keyLabel
method
Sets the label for the key column.
KeyValue::make('metadata')
    ->keyLabel('Property name')
​
valueLabel
method
Sets the label for the value column.
KeyValue::make('metadata')
    ->valueLabel('Property value')
​
keyPlaceholder
method
Sets placeholder for key inputs.
KeyValue::make('metadata')
    ->keyPlaceholder('Key')
​
valuePlaceholder
method
Sets placeholder for value inputs.
KeyValue::make('metadata')
    ->valuePlaceholder('Value')
​
addActionLabel
method
Customizes the add button label.
KeyValue::make('metadata')
    ->addActionLabel('Add property')
​
addable
method
Controls whether items can be added.
KeyValue::make('metadata')
    ->addable(false)
​
deletable
method
Controls whether items can be deleted.
KeyValue::make('metadata')
    ->deletable(false)
​
reorderable
method
Controls whether items can be reordered.
KeyValue::make('metadata')
    ->reorderable()
​
editableKeys
method
Controls whether keys can be edited.
KeyValue::make('settings')
    ->editableKeys(false)

​
Common Patterns

​
Product Metadata

KeyValue::make('metadata')
    ->keyLabel('Property')
    ->valueLabel('Value')
    ->reorderable()

​
Configuration Settings

KeyValue::make('settings')
    ->keyLabel('Setting')
    ->valueLabel('Value')
    ->keyPlaceholder('Setting name')
    ->valuePlaceholder('Setting value')
    ->addActionLabel('Add setting')

​
Custom Attributes

KeyValue::make('attributes')
    ->keyLabel('Attribute')
    ->valueLabel('Value')
    ->reorderable()
    ->addActionLabel('Add attribute')

​
Fixed Keys

KeyValue::make('social_links')
    ->editableKeys(false)
    ->default([
        'twitter' => '',
        'facebook' => '',
        'instagram' => '',
        'linkedin' => '',
    ])

​
Database Casting

Add an array cast: 
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected function casts(): array
    {
        return [
            'metadata' => 'array',
        ];
    }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us