Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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 wrapper component that provides context value.

PropTypeDescriptionValues
is_disabledbool

If true, the Editable will be disabled.

is_preview_focusablebool

If true, the read only view, has a tabIndex set to 0 so it can receive focus via the keyboard or click.

placeholderstr

The placeholder text when the value is empty.

select_all_on_focusbool

If true, the input's text will be highlighted on focus.

start_with_edit_viewbool

If true, the Editable will start with edit mode by default.

submit_on_blurbool

If true, it'll update the value onBlur and turn off the edit mode.

valuestr

The value of the Editable in both edit & preview mode

default_valuestr

The initial value of the Editable in both edit and preview mode.

Event Triggers

TriggerDescription
on_change

The on_change event handler is called when the value or checked state of the component changes.

on_edit

Function or event handler called when the user edits a form. For example, it is called when the user clicks on a edit button.

on_submit

Function or event handler called when the user submits a form. For example, it is called when the user clicks on a submit button.

on_cancel

Function or event handler called when the user cancels a form. For example, it is called when the user clicks on a cancel button.

The read-only view of the component.

Props

No component specific props

Event Triggers

No component specific event triggers

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

Props

No component specific props

Event Triggers

No component specific event triggers

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

Props

No component specific props

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting