Demos /

Forms

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

Form

Submit a real protected POST. Without JavaScript the same action returns server-rendered HTML.

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.
form.render();

TextInput

Typed fields use native browser validation.

Java composition
Form.create().addField("Email", TextInput.email("sample-email")).addField("Date", TextInput.date("sample-date")).addField("Number", TextInput.number("sample-number")).addField("Password specimen (not stored)", TextInput.password("sample-password"));

TextArea

Native multiline values, including a leading line break.

Java composition
Form.create().addField("Notes", TextArea.create("notes").withValue("\nA leading line break").withRows(3));

Select

A native single-select choice.

Java composition
Form.create().addField("Priority", Select.create("priority").addOption("normal", "Normal", true).addOption("high", "High"));

Checkbox

A labeled native checkbox.

Java composition
Checkbox.create("notify", "yes").withLabel("Notify reviewers");

RadioGroup

Mutually exclusive native choices.

Delivery
Java composition
Form.create().addField("Delivery", RadioGroup.create("delivery").addOption("summary", "Summary").addOption("all", "All updates").withSelectedValue("summary"));

Button

A button performs a real fragment request; submit buttons are shown in the Form example.

Java composition
new Div().withChild(Button.create("Request server time").withAttribute("hx-get", "/demos/fragments/time").withAttribute("hx-target", "#button-result")).withChild(new Div().withId("button-result").withAttribute("role", "status"));