Forms

Tohama provides forms and input components with an extensive API that allows you to handle input, validation, and submission.

Concepts

Tohama forms and inputs are based on the t-form and t-input components. They share a similar API that makes it easier to create simple or complex forms. They also communicate with each other in order to validate input and provide users with a clear submission experience.

t-input is a generic component that allows creating specific types of input. Currently, there are components that handle several types of user input such as text, select, color and date. You can also create your own custom input component based on t-input API.

t-input components work with or without t-form wrapped around them. For example if you have a single field, you don't need t-form to handle user input.

Each of t-input components has its own controller that extends the generic TInputController. This provides type checking and customization based on the type of user input.

Learn more about t-form and t-input.

Example

In this example, we're creating a simple form with a t-input-text field.

We created a TFormController and attached it to a t-form component in order to manually trigger a submit event.

export default defineComponent({
  setup() {
    const form = TFormController.create();

    const onSubmit = async () => {
      const status = await form.submit();
      // Check your console logs
    };

    return () => (
      <TForm controller={form}>
        <TInputText label="Full Name" />

        <TButton onClick={onSubmit}>Submit</TButton>
      </TForm>
    );
  },
});