Form.mdx

import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'; import { Header } from '../shared'; import { Form, Validations } from '../../components/Form'; import { ValidationList, Default, WithValidation, WithCustomValidation } from './Form.stories.jsx';

import EvaluationForm from '../../stories/shared/EvaluationForm'

A Form displays a set of related input fields and labels in a structured way where the user should insert their data. It can contain some other components with validation rules. It can also check the values of the data against a set of criteria before submitting it to the server.

• Importing and usage
• API
• Examples

Importing and usage

import Form from '@catho/quantum/Form';

API

Examples

With validation

Each child of Form has a property called validate. It is not required but you can provide validations on it to be fired when your form is submitted.

As you can see in the example above, we also provide some useful validations:

You can add as many validations as you want!

With custom validation

You can write your custom validate function with custom error messages.