Skip to content
Go to file


YO! That's fresh (too fresh)

Bboy Headspinhttps




yarn add @leveluptuts/fresh


A basic form

import { Form, Field } from '@leveluptuts/fresh'
const CoolApp = () => {
  return (
      onSubmit={data => {
      <Field type="number">Number</Field>
      <Field type="select" options={options} />

A slightly less basic form

import { Form, Field } from '@leveluptuts/fresh'

const CoolApp = () => {
  return (
    <Form onSubmit={onSubmit}>
      <Field type="email">Email</Field>
      <Field type="password">Password</Field>
      <Field type="tags">Tags</Field>
      <Field type="number">Number</Field>
      <Field required type="select" options={options}>
      <Field type="textarea">Text Area</Field>
      <Field type="markdown">Markdown</Field>
      <Field type="toggle">Markdown</Field>

How about one with default values?

import { Form, Field } from '@leveluptuts/fresh'

const defaultValues = {
  name: 'Brooklyn Boo',
  email: '',

const CoolApp = () => {
  return (
    <Form onSubmit={onSubmit} defaultValues={defaultValues}>
      <Field type="email">Email</Field>
      <Field>Two Words</Field>



The wrapper around your fields.

Prop Type Default Description
onSubmit func (data) => data Can be any of the following types. text (default), email, number, select, password, textarea, tags. (See types below)
cancelButton boolean true if cancel is shown
disabled boolean false if the form is disabled
cancelAction func () => null A function that will run on cancel button click
submitText string 'Submit' Custom text for submit button
cancelText string 'Cancel' Custom text for cancel button
defaultValues object {} An object with correlating default values


Common API - The props that are common among all fields

The common API is shared among all elements. Type specific fields are found below.

Prop Type Default Description
type string 'text' Can be any of the following types: text (default), email, number, select, password, textarea, tags, markdown, toggle. (See types below)
name string '' The name of the field data to be returned. If no name prop is given, the Field element's text will be converted to camelCase and be used.
required boolean false If a field is required
label boolean true If a field has a label
defaultValue string/number/array null The initial value for each field
tooltip string '' Shows an info icon next to the label with a tooltip message on hover
className string '' Custom className can be added to a field.

type - text & textarea

Prop Type Default Description
placeholder string '' placeholder text

type - password

Prop Type Default Description
strength boolean true Shows or hides the password strength meter below the field

type - select

Prop Type Default Description
options array of strings [] The text and values of a select list. *Object support coming soon

type - reference

Prop Type Default Description
displayProperty String "' Object property of what should be displayed in list
options Array of Objects [] Object property of what should be displayed in list


Not complete / in use yet, just standard html 5 validation


Add css from global.css in this repo to get the library styles if you would like them.


Can I customize this component in my own way?

This library makes some calls to keep the API easy to use and maintain. Using it with another library that tries to bring it's own inputs in isn't really needed at this time.


yarn yarn start

(in another tab) to run example

cd example yarn yarn start

Prior Art and Inspirations

I am huge fan of simple, easy APIs that take care of 90% of jobs easily. One form library I really enjoyed was . The API was simple in all of the ways that I love, but there were some aspects of the library that just didn't fit for us and our workflow. I wanted to make something that was more simple, but just as easy but with more configuration options. I'm also inspired by AutoForm for Meteor for future generation features.


MIT © leveluptuts

You can’t perform that action at this time.