Library
/
Chakra
/
Forms
/
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 editable_example():
return rx.chakra.editable(
rx.chakra.editable_preview(),
rx.chakra.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.chakra.editable(
rx.chakra.editable_preview(),
rx.chakra.editable_textarea(),
placeholder="A textarea example...",
on_submit=EditableState.set_example_textarea,
width="100%",
)The read-only view of the component.
Props
No component specific props
Event Triggers
See the full list of default event triggersThe edit view of the component. It shows when you click or focus on the text.
Props
No component specific props
Event Triggers
See the full list of default event triggersUse the textarea element to handle multi line text input in an editable context.
Props
No component specific props
Event Triggers
See the full list of default event triggersDid you find this useful?
No
Yes
