Skip to content

AisForm ​

AisForm creates a <form> element. Although not strictly necessary in an asynchronous workflow, forms provide important behaviors that users expect. One example of this is the ability to submit a form by pressing enter in a form field. Using a form also gives a single point of control for field attributes like size.

AisForm prevents traditional form submission by default as form data is expected to be submitted asynchronously. See the server-side prop below for details on using a more traditional form submission pattern.

Props ​

size ​

The size prop sets the size of controls within the form. The form itself will also get a size class as a styling hook.

disabled ​

The disabled prop will disable all controls in the form. disabled is not a standard attribute of HTML forms, so this is feature of the component. It works by directing child controls to disable themselves.

rounded ​

The rounded prop will provide a rounded setting for child elements. Use rounded to limit page configuration. It applies to text fields, textareas, selects, and buttons. Please report elements that do not respond as expected.

server-side ​

server-side is a boolean prop. When it is present (or set to true), traditional server-side form submission will be activated. When using this option, developers should specify method and action attributes. Additionally, form elements must specify a name attribute to be included with the form's data.

Events ​

@submit ​

The @submit event will be emitted when a form submission is triggered. This is typically in response to a click on a button of type submit or when a user presses enter in a form control. Developers should prefer handling @submit on a form over @click on a button as it supports a wider ranger of user behaviors.

Submit count: 0

@reset ​

The @reset event is emitted when a button of type reset is clicked. MDN advises against form resets as they are typically frustrating for users. Resetting a form will clear all form values.