Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jackmerrill/AstroForms
Forms in Astro made easy.
https://github.com/jackmerrill/AstroForms
astro json-forms jsonforms tailwindcss
Last synced: about 1 month ago
JSON representation
Forms in Astro made easy.
- Host: GitHub
- URL: https://github.com/jackmerrill/AstroForms
- Owner: jackmerrill
- Created: 2022-07-07T03:39:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-18T17:29:14.000Z (over 2 years ago)
- Last Synced: 2024-10-27T15:42:17.943Z (about 2 months ago)
- Topics: astro, json-forms, jsonforms, tailwindcss
- Language: Astro
- Homepage:
- Size: 389 KB
- Stars: 30
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-astro - Astro Forms - Forms in Astro made easy (Astro Packages/Libraries)
README
🚧 **Under Development** 🚧
This component is under construction! It does work, however, bugs may be present.
Pull requests are appreciated!
# Astro Forms
A Dynamic form component for Astro.
Uses a JSON schema to generate a form.
## Themes
There are currently two themes available:
- `default`
- `tailwind` [(View README)](/packages/astro-forms/themes/tailwind/README.md)
## Usage
### Installation
```bash
yarn add astro-forms
```
or
```bash
npm install astro-forms
```
### Setup
```astro
---
import { Form } from "astro-forms";
const schema = {
type: "object",
properties: {
name: {
type: "string",
title: "Name",
},
email: {
type: "string",
title: "Email",
},
password: {
type: "string",
title: "Password",
},
submit: {
type: "submit",
title: "Submit",
},
},
}; // Or whatever you want it to be, must be an object.
---
```
## Schema
The JSON schema for this form component has a single type that can repeat itself.
```ts
export type InputType =
| "string"
| "email"
| "password"
| "search"
| "url"
| "number"
| "boolean"
| "array"
| "object"
| "date"
| "submit";
export interface FormSchema {
type: InputType;
title: string;
subtitle?: string;
properties: {
[key: string]: FormSchema;
};
items?: FormSchema;
}
```
These types may be updated and will be marked as a breaking change if done so.
Schema example:
```json
{
"type": "object",
"title": "Form",
"properties": {
"name": {
"type": "string",
"title": "Name",
"subtitle": "Alphanumeric characters only!!!!"
},
"email": {
"type": "string",
"title": "Email",
"subtitle": "Don't worry, we'll spam you every day!"
},
"password": {
"type": "password",
"title": "Password",
"subtitle": "We didn't invest much into security, choose wisely."
},
"personalInfo": {
"type": "object",
"title": "Personal Info",
"properties": {
"age": {
"type": "number",
"title": "Age",
"subtitle": "How old are you?"
},
"birthday": {
"type": "date",
"title": "Birthday",
"subtitle": "So we can send you a cake, duh."
},
"misc": {
"type": "object",
"title": "Misc. Stuff",
"properties": {
"isScary": {
"type": "boolean",
"title": "Sus?",
"subtitle": "Are you known by the FBI, CIA, or any governmental body?"
}
}
},
"acceptsTerms": {
"type": "boolean",
"title": "Accept Terms of Service",
"subtitle": "We're not responsible for your actions."
}
}
},
"submit": {
"type": "submit",
"title": "Submit"
}
}
}
```
Input names are tokenized and have a `.` delimiter, so they can be used with HTML forms with ease.