1# Editable
2 
3Inline text editing with preview/edit modes
4 
5**Parts:** `EditableRoot`, `EditableArea`, `EditableInput`, `EditablePreview`, `EditableSubmitTrigger`, `EditableCancelTrigger`, `EditableEditTrigger`
6 
7## EditableRoot
8 
9### Props
10| Prop | Type | Default |
11|------|------|---------|
12| `activationMode` | `"dblclick" \| "focus" \| "none"` | `"focus"` |
13| `as` | `AsTag \| Component` | `"div"` |
14| `asChild` | `boolean` | - |
15| `autoResize` | `boolean` | `false` |
16| `defaultValue` | `string` | - |
17| `dir` | `"ltr" \| "rtl"` | - |
18| `disabled` | `boolean` | `false` |
19| `id` | `string` | - |
20| `maxLength` | `number` | - |
21| `modelValue` | `string` | - |
22| `name` | `string` | - |
23| `placeholder` | `string \| { edit: string; preview: string; }` | `"Enter text..."` |
24| `readonly` | `boolean` | - |
25| `required` | `boolean` | `false` |
26| `selectOnFocus` | `boolean` | `false` |
27| `startWithEditMode` | `boolean` | - |
28| `submitMode` | `"blur" \| "none" \| "enter" \| "both"` | `"blur"` |
29 
30### Emits
31| Event | Payload |
32|-------|---------|
33| `submit` | `[value: string]` |
34| `update:modelValue` | `[value: string]` |
35| `update:state` | `[state: "cancel" \| "submit" \| "edit"]` |
36 
37### Slots
38| Slot | Type |
39|------|------|
40| `isEditing` | `boolean` |
41| `modelValue` | `string \| undefined` |
42| `isEmpty` | `boolean` |
43| `submit` | `` |
44| `cancel` | `` |
45| `edit` | `` |
46 
47## EditableArea
48 
49### Props
50| Prop | Type | Default |
51|------|------|---------|
52| `as` | `AsTag \| Component` | `"div"` |
53| `asChild` | `boolean` | - |
54 
55## EditableInput
56 
57### Props
58| Prop | Type | Default |
59|------|------|---------|
60| `as` | `AsTag \| Component` | `"input"` |
61| `asChild` | `boolean` | - |
62 
63## EditablePreview
64 
65### Props
66| Prop | Type | Default |
67|------|------|---------|
68| `as` | `AsTag \| Component` | `"span"` |
69| `asChild` | `boolean` | - |
70 
71## EditableSubmitTrigger
72 
73### Props
74| Prop | Type | Default |
75|------|------|---------|
76| `as` | `AsTag \| Component` | `"button"` |
77| `asChild` | `boolean` | - |
78 
79## EditableCancelTrigger
80 
81### Props
82| Prop | Type | Default |
83|------|------|---------|
84| `as` | `AsTag \| Component` | `"button"` |
85| `asChild` | `boolean` | - |
86 
87## EditableEditTrigger
88 
89### Props
90| Prop | Type | Default |
91|------|------|---------|
92| `as` | `AsTag \| Component` | `"button"` |
93| `asChild` | `boolean` | - |
94