Enhance xt.input attribute

[anirudh-hegde]

def index() -> xt.Component:
    layout = xt.form(xt.vstack(
        xt.input(
            placeholder="Paste YAML code here",
            on_change=State.on_yaml_input_change,
            width="30%",
            height="300px",
        ), ),
        xt.button("Convert to Python", on_click=State.handle_conversion),
        xt.text(State.python_data, font_size="2em"),
        spacing="1em",
        align_items="center",
        justify_content="center",
        height="100vh",
    )
    return layout

Problem statement

when I type inside the input it shows

Feature

When I press enter it should go to next line

[anubrag]

Hey Anirud,

For handling larger text inputs like YAML code, we can use xt.text_area a better fit. Here's a quick example to show how it can be set up:

xt.text_area(
    placeholder="Paste YAML code here",
    on_change=State.on_yaml_input_change,
    width="30%",
    height="300px",
)

By the way, I'm currently working on putting together more detailed documentation for these components, including text_area. It's a work in progress, but you can check out what I've got so far here. I'm planning to get the form-related docs polished up first.

[anirudh-hegde]

Thank you, it's working :)