Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

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

Fired when the Editable is changed.

on_edit

Fired when the Editable is in edit mode.

on_submit

Fired when the Editable is submitted.

on_cancel

Fired when the Editable is canceled.

The read-only view of the component.

Props

No component specific props

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

Props

No component specific props

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

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting