✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog
DocsBlogChangelog

Search documentation...

/

Star

12k+

[ Learn ]

[ Concepts ]

[ Reference ]

Editable


Editable is used for inline renaming of some text. It appears as normal UI text but transforms into a text input field when the user clicks on or focuses it.
An input example...
class EditableState(rx.State):
    example_input: str
    example_textarea: str
    example_state: str

    def set_uppertext(self, example_state: str):
        self.example_state = example_state.upper()


def index():
    return rx.editable(
        rx.editable_preview(),
        rx.editable_input(),
        placeholder="An input example...",
        on_submit=EditableState.set_uppertext,
        width="100%",
    )
Another variant of editable can be made with a textarea instead of an input.
A textarea example...
rx.editable(
    rx.editable_preview(),
    rx.editable_textarea(),
    placeholder="A textarea example...",
    on_submit=EditableState.set_example_textarea,
    width="100%",
)

Editable


The wrapper component that provides context value.


EditableInput


The edit view of the component. It shows when you click or focus on the text.


  • No props for EditableInput.

  • Base Event Triggers

EditableTextarea


Use the textarea element to handle multi line text input in an editable context.


  • No props for EditableTextarea.

  • Base Event Triggers

EditablePreview


The read-only view of the component.


  • No props for EditablePreview.

  • Base Event Triggers

← CheckboxInput →

Copyright © 2023 Pynecone, Inc.