Components

Editable

Click-to-edit inline text that swaps the value for an input, saving on Enter or blur.

php artisan blatui:add editable

<x-ui.editable name="title" value="Project Apollo" label="title" class="max-w-xs" />

Textarea

<x-ui.editable
    name="bio"
    as="textarea"
    label="bio"
    value="Senior engineer crafting design systems. Press Enter for a new line, then Save."
    class="max-w-sm"
/>

With Placeholder

<x-ui.editable name="nickname" label="nickname" placeholder="Add a nickname…" class="max-w-xs" />

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php

use Livewire\Component;

class Demo extends Component
{
    public string $title = 'Untitled';

    public function render()
    {
        return view('livewire.demo');
    }
}

resources/views/livewire/demo.blade.php

<x-ui.editable wire:model="title" />

API Reference

Props, slots and exposed methods for <x-ui.editable>.

Props

Prop	Type	Default	Description
`value`	`string`	`''`	The current value shown in display mode and seeded into the editor.
`as`	`string`	`'input'`	Editor field type — a single-line input or a multi-line textarea. `input` `textarea`
`label`	`string`	`'value'`	Accessible label used for the editor field and the "Edit {label}" trigger.
`placeholder`	`string`	—	Text shown when the value is empty (in both display and editing states).
`size`	`string`	`'default'`	Field padding and typography. `sm` `default` `lg`
`name`	`string`	—	When set, renders a hidden input with this name so the committed value submits with a form.
`id`	`string`	—	Id for the hidden input, applied only when name is set.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`edit()`	Enter editing mode, copy the value into the draft, and focus/select the field.
`save()`	Commit the draft to the value and return to display mode.
`cancel()`	Discard the draft and return to display mode.