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 rc.editable(
        rc.editable_preview(),
        rc.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...

rc.editable(
    rc.editable_preview(),
    rc.editable_textarea(),
    placeholder="A textarea example...",
    on_submit=EditableState.set_example_textarea,
    width="100%",
)

rc.Editable

The wrapper component that provides context value.

Prop	Type \| Values	Default
`is_disabled`	`bool`
`is_preview_focusable`	`bool`
`placeholder`	`str`
`select_all_on_focus`	`bool`
`start_with_edit_view`	`bool`
`submit_on_blur`	`bool`
`value`	`str`
`default_value`	`str`

Event Triggers

See the full list of default event triggers

Trigger	Description
`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.

rc.EditablePreview

The read-only view of the component.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rc.EditableInput

The 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 triggers

rc.EditableTextarea

Use 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 triggers