star

Tip

This page only contains information on the st.forms API.
For a deeper dive into creating and using forms within Jeamlit apps, read our guide on Using forms.

Jt.form

Create a form that batches elements together with a 'Submit' button.

A form is a container that visually groups other elements and widgets together, and contains a Submit button. When the form's Submit button is pressed, all widget values inside the form will be sent to Jeamlit in a batch.

To add elements to the form: 

 
 var form = Jt.form("my-form-1").use();
 Jt.yourElement().use(form);
 ...
 Jt.formSubmitButton("submit form").use();

Forms have a few constraints:

  • Every form must contain a Jt.formSubmitButton)
  • Jt.button and Jt.downloadButton cannot be added to a form
  • Forms can appear anywhere in your app (sidebar, columns, etc), but they cannot be embedded inside other forms
  • Within a form, the only widget that can have a callback function is Jt.formSubmitButton)

Method Signatures and Parameters

Jt.form()

Chainable builder methods

clearOnSubmit(boolean clearOnSubmit)

If True, all widgets inside the form will be reset to their default values after the user presses the Submit button.

enterToSubmit(boolean enterToSubmit)

If True (default), pressing Enter while in a form widget is like clicking the first form submit button. If False, the user must click the submit button to submit the form.

border(boolean border)

Whether to show a border around the form. Default is true. It is recommended to only remove the border if there is another border or the form is small.

width(String width)

The width of the element. This can be one of the following:

  • content (default): The width of the element matches the width of its content, but doesn't exceed the width of the parent container.
  • stretch: The width of the element matches the width of the parent container.
  • An integer specifying the width in pixels: The element has a fixed width. If the specified width is greater than the width of the parent container, the width of the element matches the width of the parent container.

width(int widthPixels)

The width of the element in pixels. The element will have a fixed width. If the specified width is greater than the width of the parent container, the width of the element matches the width of the parent container.

height(String height)

The height of the form container. Can be "content" (default - matches height of content), "stretch" (matches content or parent container height), or a specific pixel value (sets a fixed height, enabling scrolling if content exceeds it).

key(String key)

A string to use as the unique key for the widget. If this is omitted, a key will be generated for the widget based on its content. No two widgets may have the same key.

No description

use()

Put the widget in the app, in the MAIN container.

use(JtContainer container)

Put the widget in the app, in the provided container.

Returns after .use()

(JtContainer)

The current JtContainer value of the component.

Examples

User registration form 

 import tech.catheu.jeamlit.core.Jt;

 public class FormApp {
     public static void main(String[] args) {
         var form = Jt.form().use();

         String name = Jt.textInput("Full Name").use(form);
         String email = Jt.textInput("Email").use(form);
         int age = Jt.numberInput("Age", Integer.class).min(0).max(120).use(form);
         boolean subscribe = Jt.checkbox("Subscribe to newsletter").use(form);

         if (Jt.formSubmitButton("Register").use()) {
             Jt.text("Welcome, " + name + "!").use();
             Jt.text("Email: " + email).use();
         }
     }
 }

Survey form 

 import tech.catheu.jeamlit.core.Jt;

 import java.util.List;

 public class SurveyFormApp {
     public static void main(String[] args) {
         var form = Jt.form().use();
         double satisfaction = Jt.slider("Satisfaction (1-10)").min(1).max(10).value(5).use(form);
         String feedback = Jt.textArea("Additional feedback").use(form);
         String department = Jt.selectbox("Department",
                                          List.of("Engineering", "Marketing", "Sales", "Support")).use(form);

         if (Jt.formSubmitButton("Submit Survey").use(form)) {
             Jt.text("Thank you for your feedback!").use();
             Jt.text("Satisfaction: " + satisfaction + "/10").use();
         }
     }
 }

Previous: Execution flowNext: Jt.formSubmitButton
forum

Still have questions?

Go to our discussions forum for helpful information and advice from Jeamlit experts.