@formulir/material-ui

Formulir - Build instant Material UI forms

Formulir is a simple library for building instant forms with Material UI (MUI) components.

Installation

You’ll want to install Formulir and its peer-dependencies via yarn (or npm).

MUI Core (Required)

yarn add @mui/material @emotion/react @emotion/styled

MUI Lab (Required)

yarn add @mui/lab date-fns @date-io/date-fns

Formulir

yarn add @formulir/material-ui

Note : If you use ex. Next.js make sure server rendering is in Material UI (MUI), to make it easier, you can follow the sample project from the Material UI documentation.

• Example Projects (Official)

Basic Usage

import {
    FForm,
    FButton,
    FTextField,
    FAutocomplete,
    FCheckbox,
    FDatePicker,
    FRadioGroup,
    FTimePicker,
} from '@formulir/material-ui'

const FormFormulir = () => {
    const initialValues = {
        // FTextField, return {String}
        username: {
            initialValue: "",
            validation: "string"
        },
        // FAutocomplete, return {String | Array}
        gender: '', // Single value
        favoriteSongs: {
            initialValue: [], // Multiple values
            validation: "array"
        },
        // FCheckbox, return {Array}
        hobbies: [],
        // FDatePicker, return {Date}
        birthDate: '',
        // FRadioGroup, return {Array}
        yearOfCollege: [],
        // FTimePicker, return {Date}
        eventTime: '',
    }
    const handleSubmit = (values, { setSubmitting }) => {
        console.log(values)
        setSubmitting(false)
    }
    return (
        <FForm
            initialValues={initialValues}
            onSubmit={handleSubmit}
        >
            <FTextField
                name='username'
                type='text'
                errorMessage='Cusutom error message'
            />
            <FAutocomplete
                name='gender'
                // Notes: If the `value` is not defined it will return `undefined`
                options={[
                    { label: 'Laki-laki', value: 'male' },
                    { label: 'Perempuan', value: 'female' },
                ]}
                muiInputProps={{
                    TextFieldProps: {
                        variant: 'outlined',
                    },
                }}
            />
            <FAutocomplete
                name='favoriteSongs'
                // Notes: If the `value` is not defined it will return `undefined`
                options={[
                    { label: 'Eminem', value: 'optionID-XwP0-900' },
                    { label: 'A7X', value: 'optionID-XwP0-9222' },
                    { labelAndValue: 'Rex Orange Country' },
                ]}
                muiInputProps={{
                    AutocompleteProps: {
                        multiple: true,
                    },
                    TextFieldProps: {
                        placeholder: 'My Placeholder',
                    },
                }}
            />
            <FCheckbox
                name='hobbies'
                // Notes: If the `value` is not defined it will return the value of the `label`
                options={[{ label: 'Football': value: "OptionID-x01" }, { labelAndValue: 'Volleybal' }]}
            />
            <FDatePicker name='birthDate' />
            <FRadioGroup
                name='yearOfCollege'
                // Notes: If the value is not defined it will return the value of the label
                options={[
                    { label: '55', value: 'Saga Agrisatya' },
                    { label: '54' },
                    { label: '53' },
                ]}
            />
            <FTimePicker
                name='eventTime'
                muiInputProps={{
                    TimePickerProps: {
                        ampm: false,
                    },
                }}
            />
            <FButton />
        </FForm>
    )
}

Setup (Required)

DatePicker and TimePicker

// App.js
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";

function App() {
  return <LocalizationProvider dateAdapter={AdapterDateFns}>...</LocalizationProvider>;
}

API Reference

FForm

Name	Type	Note
initialValues	object	required
validationSchema	object	optional
validate	object	optional
onSubmit	function	required

FButton

Name	Type	Note
muiInputProps	{ ButtonProps: {...} }	optional

FTextField

Name	Type	Note
muiInputProps	{ TextFieldProps: {...} }	optional
name	string	required
label	string	optional
errorMessage	string	optional
type	string	required

FAutocomplete

Name	Type	Note
muiInputProps	{ TextFieldProps: {...}, AutocompleteProps: {...} }	optional
name	string	required
label	string	optional
errorMessage	string	optional
options	array	required

FDatePicker

Name	Type	Note
muiInputProps	{ TextFieldProps: {...}, DatePickerProps: {...} }	optional
name	string	required
label	string	optional

FTimePicker

Name	Type	Note
muiInputProps	{ TextFieldProps: {...}, TimePickerProps: {...} }	optional
name	string	required
label	string	optional

FCheckbox

Name	Type	Note
muiInputProps	{ FormControlLabelProps : {...}	optional
name	string	required
label	string	optional
errorMessage	string	optional
options	array	required

FRadioGroup

Name	Type	Note
muiInputProps	{ FormControlLabelProps : {...}	optional
name	string	required
label	string	optional
errorMessage	string	optional
options	array	required

Note : TextFieldProps (https://mui.com/api/text-field/#props), ButtonProps (https://mui.com/api/button/), FormControlLabelProps (https://mui.com/api/form-control-label/), etc.

Examples

• CodeSandbox