HTML

rx.el.div(
    rx.el.p("A plain paragraph."),
    rx.el.button("A plain button"),
    rx.el.input(placeholder="A plain input"),
)

rx.el.div(
    rx.el.div(
        "Style props",
        padding="12px",
        border=f"1px solid {rx.color('indigo', 7)}",
        border_radius="8px",
        background=rx.color("indigo", 3),
    ),
    rx.el.div(
        "style dict",
        style={"padding": "12px", "border": "1px dashed gray", "border_radius": "8px"},
    ),
    rx.el.div(
        "Tailwind classes",
        class_name="p-3 rounded-lg border-2 border-dotted font-semibold",
    ),
    display="flex",
    gap="12px",
    flex_wrap="wrap",
)

rx.el.div(
    rx.el.span("Hover me", title="A native tooltip", text_decoration="underline dotted"),
    rx.el.span("You cannot see me", hidden=True),
    rx.el.p("Right to left", dir="rtl", lang="en"),
    rx.el.div(
        "Focus me with Tab",
        tab_index=0,
        role="note",
        custom_attrs={"aria-label": "Demo note", "data-kind": "demo"},
        padding="8px",
        border="1px solid gray",
        border_radius="6px",
    ),
    display="flex",
    flex_direction="column",
    gap="8px",
)

class HtmlElButtonState(rx.State):
    count: int = 0

    @rx.event
    def add_one(self):
        self.count += 1


rx.el.div(
    rx.el.button(
        "Add one",
        type="button",
        on_click=HtmlElButtonState.add_one,
        padding="6px 14px",
        border="1px solid gray",
        border_radius="6px",
        cursor="pointer",
    ),
    rx.el.button("Disabled", disabled=True, padding="6px 14px", border="1px solid gray", border_radius="6px", opacity="0.5"),
    rx.el.span("Count: ", HtmlElButtonState.count),
    display="flex",
    gap="12px",
    align_items="center",
)

class HtmlElInputState(rx.State):
    name: str = ""
    level: int = 40
    last_key: str = ""

    @rx.event
    def change_name(self, value: str):
        self.name = value

    @rx.event
    def change_level(self, value: float):
        self.level = int(value)

    @rx.event
    def remember_key(self, key: str):
        self.last_key = key


rx.el.div(
    rx.el.input(
        type="text",
        value=HtmlElInputState.name,
        on_change=HtmlElInputState.change_name,
        on_key_down=HtmlElInputState.remember_key,
        placeholder="Your name",
        max_length=20,
        padding="6px 10px",
        border="1px solid gray",
        border_radius="6px",
    ),
    rx.el.p("Hello, ", HtmlElInputState.name, " (last key: ", HtmlElInputState.last_key, ")"),
    rx.el.input(
        type="range",
        min=0,
        max=100,
        step=5,
        value=HtmlElInputState.level,
        on_change=HtmlElInputState.change_level,
    ),
    rx.el.p("Level: ", HtmlElInputState.level),
    display="flex",
    flex_direction="column",
    gap="8px",
    max_width="320px",
)

rx.el.div(
    rx.el.input(type="date"),
    rx.el.input(type="color", default_value="#6e56cf"),
    rx.el.label(rx.el.input(type="checkbox", default_checked=True), " Remember me"),
    rx.el.input(type="email", placeholder="you@example.com", required=True, border="1px solid gray", padding="4px 8px"),
    rx.el.input(type="number", min=1, max=9, default_value=3, border="1px solid gray", padding="4px 8px", width="80px"),
    display="flex",
    gap="12px",
    flex_wrap="wrap",
    align_items="center",
)

rx.el.div(
    rx.el.p(
        "A p is a block. A ",
        rx.el.span("span", color=rx.color("tomato", 11), font_weight="bold"),
        " stays inside the line.",
    ),
    rx.el.div("A div is a box with no meaning.", padding="8px", background=rx.color("gray", 3)),
)

rx.el.div(
    rx.el.a(
        "Reflex docs (new tab)",
        href="https://reflex.dev/docs/library/html/html/",
        target="_blank",
        rel="noopener noreferrer",
        color=rx.color("indigo", 11),
        text_decoration="underline",
    ),
    rx.el.a("Home page", href="/", color=rx.color("indigo", 11), text_decoration="underline"),
    display="flex",
    gap="16px",
)

class HtmlElNoticeState(rx.State):
    visible: bool = True

    @rx.event
    def dismiss(self):
        self.visible = False

    @rx.event
    def show_again(self):
        self.visible = True


rx.cond(
    HtmlElNoticeState.visible,
    rx.el.div(
        rx.el.p(
            rx.el.span(
                "New",
                background=rx.color("indigo", 9),
                color="white",
                padding="2px 8px",
                border_radius="999px",
                font_size="12px",
                margin_right="8px",
            ),
            "Version 2 is out.",
            font_weight="600",
        ),
        rx.el.p("Read what changed before you update.", color=rx.color("gray", 11), margin_y="6px"),
        rx.el.div(
            rx.el.a(
                "Release notes",
                href="https://reflex.dev/docs/",
                target="_blank",
                rel="noopener noreferrer",
                color=rx.color("indigo", 11),
                text_decoration="underline",
            ),
            rx.el.button(
                "Dismiss",
                type="button",
                on_click=HtmlElNoticeState.dismiss,
                padding="4px 12px",
                border=f"1px solid {rx.color('gray', 7)}",
                border_radius="6px",
                cursor="pointer",
            ),
            display="flex",
            gap="16px",
            align_items="center",
        ),
        padding="16px",
        border=f"1px solid {rx.color('indigo', 6)}",
        border_radius="10px",
        background=rx.color("indigo", 2),
        max_width="360px",
    ),
    rx.el.button("Show again", on_click=HtmlElNoticeState.show_again, text_decoration="underline", cursor="pointer"),
)