Component
Editable
Edits text in place: a preview that swaps to an input on activation.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/editableExamples
Live previews render through the docs app's PandaCSS codegen.
<Editable aria-label="Project name" defaultValue="Untitled project" />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `value` | `string` | No | - | Current text (controlled). |
| `defaultValue` | `string` | No | - | - |
| `onSubmit` | `(value: string) => void` | No | - | Fires when an edit is committed (Enter or blur). |
| `placeholder` | `string` | No | - | - |
| `disabled` | `boolean` | No | - | - |
| `'aria-label'` | `string` | No | - | Accessible name for both the preview button and the input. |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/editable.json`
- Recipe: `editable`
- Files: `src/components/ui/editable.tsx`