Skip to content
Paramanu v0.1.0-alpha.0

Editable Text

The Editable Text component displays text that can be clicked to switch into edit mode, allowing inline editing.

Basic Usage

Click to edit 
import { Editable } from "@paramanu/forms-react"


export default function App() {
  return (
    <Editable>
      <span>Click to edit</span>
    </Editable>
  )
}
<div class="pm-editable pm-editable--md" role="group">
  <span>Click to edit</span>
</div>

Editing Mode

import { Editable } from "@paramanu/forms-react"


export default function App() {
  return (
    <Editable editing>
      <input defaultValue="Editing mode" />
    </Editable>
  )
}
<div class="pm-editable pm-editable--md pm-editable--editing" role="group">
  <input class="pm-input pm-input--outline pm-input--md" value="Editing mode" />
</div>