Skip to content
Demos /

Interaction & feedback

Working framework components, paired with the Java that composes them.

AccordionModule

Expandable sections with keyboard-accessible controls.

Rendering model

Build once.
Java composition
AccordionModule.create().withTitle("Rendering model").addItem("Structure", "Build once.").addItem("Request data", "Render with a context.").withFirstExpanded();
AccordionModule APIDocumentation

TabsModule

Switch between keyboard-navigable content panels.

Request lifecycle

Build static structure.
Java composition
TabsModule.create().withTitle("Request lifecycle").addTab("Compose", "Build static structure.").addTab("Render", "Supply typed context values.");
TabsModule APIDocumentation

CalloutModule

A contextual notice composed as a module.

Review complete

This is illustrative content.
Java composition
CalloutModule.create().withTitle("Review complete").withContent("This is illustrative content.").success();
CalloutModule APIDocumentation

FormModule

A high-level form using the same protected preview endpoint.

Contact preview

Your server-rendered result appears here.
Java composition
Form form = Form.create()
    .withAction("/demos/api/form-preview").withMethod(Form.Method.POST)
    .withHxPost("/demos/api/form-preview").withHxTarget("#form-preview").withHxSwap("outerHTML")
    .addField("Name", TextInput.create("name").required())
    .addField("Email", TextInput.email("email").required())
    .addField("Role", Select.create("role").addOption("engineer", "Engineer").addOption("designer", "Designer"))
    .withChild(Button.submit("Render preview"))
    .withChild(new Div().withId("form-preview").withAttribute("role", "status")
        .withInnerText("Your server-rendered result appears here."));
// Application SSR adds one _csrf field and inherited literal hx-headers.
FormModule.create().withTitle("Contact preview").withForm(form);
FormModule APIDocumentation

DynamicCardModule

Submit a value to rebuild this request-owned dynamic card.

Dynamic card

Request value
Compose, Render
Java composition
String value = "Compose, Render";
Component module = DynamicCardModule.create().withTitle("Dynamic card").withCardContent("Request value", value);
new Div().withChild(Form.create().withAction("/demos/api/dynamic").withMethod(Form.Method.POST)
    .withHxPost("/demos/api/dynamic").withHxTarget("#dynamic-result").withHxSwap("outerHTML")
    .withChild(new HtmlTag("input", true).withAttribute("type", "hidden")
        .withAttribute("name", "kind").withAttribute("value", "dynamic-card"))
    .addField("Value", TextInput.create("value").withValue(value).required())
    .withChild(Button.submit("Update dynamic-card")))
    .withChild(new Div().withId("dynamic-result").withAttribute("aria-live", "polite").withChild(module));
// POST /demos/api/dynamic selects the same module with the submitted value.
DynamicCardModule APIDocumentation