Mithril UI Form

mithril-ui-form is a powerful, declarative framework for creating accessible, high-performance forms in Mithril applications. It uses a JSON-based schema to dynamically generate forms with a wide range of features.

Key Features

• Object-based and array-based forms: Support for editing single objects or collections of objects.
• Rich component library: Includes a variety of input types, such as text, textarea, select, checkbox, radio, date, time, and file uploads.
• Conditional logic: Show or hide form fields based on the values of other fields.
• Validation: Built-in support for required fields and custom validation rules.
• Plugin system: Extend the library with custom components and functionality.
• Accessibility: Full compliance with WCAG 2.1 AA standards.

Core Components

The core library, mithril-ui-form, provides the main components for creating forms:

• LayoutForm: For creating forms that edit a single object.
• ArrayLayoutForm: For creating forms that edit a collection of objects.

Plugin System

mithril-ui-form has a plugin system that allows you to extend its functionality with custom components. The mithril-ui-form-plugin package defines the plugin architecture.

Some example plugins include:

• mithril-ui-form-leaflet-plugin: Adds a Leaflet map component.
• mithril-ui-form-rating-plugin: Adds a star rating component.

Form Field Examples

Here are some examples of the form fields you can create with mithril-ui-form.

Automatic id generation

Automatically generate an id for a new object, only if it is undefined. You can also use guid if you need GUID. And instead of type "none", you can also set type "text" and disabled to true. Using type "none" will not show it.

json
1{ "id": "id", type: "none", "autogenerate": "id" }

Text Input

For single-line text input.

json
1{
2  "id": "name",
3  "label": "Name",
4  "type": "text",
5  "required": true,
6  "maxLength": 50,
7  "placeholder": "Enter your full name"
8}

Other useful types are url, email, and password.

Text Area

For multi-line text input.

json
1{
2  "id": "description",
3  "label": "Description",
4  "type": "textarea",
5  "maxLength": 500,
6  "placeholder": "Enter a description"
7}

Number Input

For numeric input. Use integer for whole numbers.

json
1{
2  "id": "age",
3  "label": "Age",
4  "type": "number",
5  "min": 0,
6  "max": 120,
7  "required": true
8}

Date and Time

For date and time input. date, time, and datetime types are available.

json
1{
2  "id": "event_date",
3  "label": "Event Date",
4  "type": "datetime",
5  "required": true
6}

Color Picker

For selecting a color.

json
1{
2  "id": "theme_color",
3  "label": "Theme Color",
4  "type": "color"
5}

Select Dropdown

For selecting one or more options from a list.

json
1{
2  "id": "country",
3  "label": "Country",
4  "type": "select",
5  "options": [
6    { "id": "us", "label": "United States" },
7    { "id": "ca", "label": "Canada" },
8    { "id": "mx", "label": "Mexico" }
9  ]
10}

Radio Buttons

For selecting a single option from a set of choices.

json
1{
2  "id": "gender",
3  "label": "Gender",
4  "type": "radio",
5  "options": [
6    { "id": "male", "label": "Male" },
7    { "id": "female", "label": "Female" },
8    { "id": "other", "label": "Other" }
9  ]
10}

Checkboxes

For selecting multiple options.

json
1{
2  "id": "interests",
3  "label": "Interests",
4  "type": "checkbox",
5  "options": [
6    { "id": "sports", "label": "Sports" },
7    { "id": "music", "label": "Music" },
8    { "id": "movies", "label": "Movies" }
9  ]
10}

Switch

For a boolean toggle.

json
1{
2  "id": "notifications",
3  "label": "Enable Notifications",
4  "type": "switch"
5}

File Upload

For uploading files. The base64 type can be used to store the file as a base64 string.

json
1{
2  "id": "avatar",
3  "label": "Avatar",
4  "type": "file",
5  "url": "/upload",
6  "options": [{ "id": "image/*" }]
7}

Tags Input

For creating a list of tags.

json
1{
2  "id": "tags",
3  "label": "Tags",
4  "type": "tags"
5}

Autocomplete

For a text input with suggestions.

json
1{
2  "id": "framework",
3  "label": "JS Framework",
4  "type": "autocomplete",
5  "options": [
6    { "id": "react", "label": "React" },
7    { "id": "vue", "label": "Vue" },
8    { "id": "angular", "label": "Angular" }
9  ]
10}

Rating

A star rating component (requires the mithril-ui-form-rating-plugin).

json
1{
2  "id": "satisfaction",
3  "label": "Satisfaction",
4  "type": "rating",
5  "min": 1,
6  "max": 5
7}

Map

For selecting a location on a map (requires the mithril-ui-form-leaflet-plugin).

json
1{
2  "id": "location",
3  "label": "Location",
4  "type": "map",
5  "required": true
6}

Markdown

For displaying static markdown content.

json
1{
2  "type": "md",
3  "value": "### Section Title\n\nThis is some informational text."
4}

Repeating Sections

To create a list of items, such as a list of editors.

json
1{
2  "id": "editors",
3  "label": "Editors",
4  "repeat": true,
5  "type": [
6    { "id": "name", "label": "Name", "type": "text" },
7    { "id": "role", "label": "Role", "type": "text" }
8  ]
9}

Conditional Visibility

You can show or hide fields based on the values of other fields using the show property.

json
1{
2  "id": "is_company",
3  "label": "Are you a company?",
4  "type": "switch"
5},
6{
7  "id": "company_name",
8  "label": "Company Name",
9  "type": "text",
10  "show": "is_company"
11}

This will only show the company_name field when the is_company switch is on. show can also be an array, using multiple properties, e.g. ["color=red", "optionId=4"].

Getting Started

To get started with mithril-ui-form, you can use the example application provided in the example package.

Installation

bash
1pnpm install

Development

bash
1pnpm start

This will build all the packages and start a development server for the example application.