Rocket Logo Stoxy Docs Guides Toggle darkmode

Components: Stoxy Form

Stoxy Form is a web component used for handling Stoxy state without having to write any javascript.

On submit, the form persists the form's data to state with the given key attribute.

If the url attribute is set, the form creates a HTTP request before saving the data to state.

Attributes

NameAttribute
keyKey in string form. Used as the name of the state object
actionEither add or set dependeing on wanted to add to a colleciton in state, or deplace the state
urlIn some cases you might want to send the form data to the backend. For these situations you can declare the url property. If set, sends a fetch request to given url on submit.
methodIf url is set, specifies the HTTP method used for the request. Defaults to GET
requireokIf url is set, specifies if the HTTP request is required to return a OK status before committing the object to state.

Usage

import '@stoxy/form';
<stoxy-form
    key="todos"
    action="add"
    @submit=${() => {
         this.shadowRoot.querySelector('input').value = '';
    }}
>
    <input
        type="text"
        name="task"
        placeholder="Add todo..."
        autocomplete="off"
    />
    <input type="submit" value="Submit" />
</stoxy-form>

Adds

{ task: "Your input" }

to the state at key "todos".

Sending the form data to a API on submit

In some cases we might want to send the data from the form to a backend API while we save it to our state at the same time. This can be done by utilizing the stoxy-form's url attribute.

import '@stoxy/form';
<stoxy-form
    key="todos"
    action="add"
    url="https://my-website.app/todoadd"
    method="POST"
    requireok
    @submit=${() => {
         this.shadowRoot.querySelector('input').value = '';
    }}
>
    <input
        type="text"
        name="task"
        placeholder="Add todo..."
        autocomplete="off"
    />
    <input type="submit" value="Submit" />
</stoxy-form>

In the above case, a POST request would be made to https://my-website.app/todoadd, with the body { task: "Your input" }.

The requireok attribute means that unless we get a OK response from the backend, we won't save the data to state either.