4.0.9

Formol is a full featured object edition form framework for React.

All fields

text

areaText Area

email

number

password

password-strength

strong

tel

url

color

date

date-native

time

datetime-local

month

week

range

0

42

100

money

$

calendar

switch

NoYes

html

HTML

radio

radio-set

WhiteSilverGrayBlackRedMaroonYellowOliveLimeGreenAquaTealBlueNavyFuchsiaPurple

checkbox

checkbox-set

WhiteSilverGrayBlackRedMaroonYellowOliveLimeGreenAquaTealBlueNavyFuchsiaPurple

file

Enlever

selectWhiteSilverGrayBlackRedMaroonYellowOliveLimeGreenAquaTealBlueNavyFuchsiaPurple

select-menu

Maroon

{
  "text": "text",
  "area": "Text\nArea ",
  "email": "email@exemple.com",
  "number": 12,
  "password": "P455w0rD",
  "password-strength": "57r0nG P455w0rD",
  "tel": "541-754-3010",
  "url": "https://example.com/",
  "color": "#663399",
  "date": "2024-05-21",
  "date-native": "2024-05-21",
  "time": "17:14",
  "datetime-local": "2018-08-01T17:14",
  "month": "2018-08",
  "week": "2018-W12",
  "range": 42,
  "money": "12.50",
  "calendar": "2018-08-01",
  "switch": true,
  "html": "<p><span style=\"color: rgb(251, 160, 38);\">H</span><strong>T</strong>M<em>L</em></p>",
  "radio": true,
  "radio-set": "#ffff00",
  "checkbox": true,
  "checkbox-set": [
    "#800000",
    "#ffff00"
  ],
  "file": {
    "data": "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCA5MzMgODgyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHN0eWxlPSJmb250LXNpemU6MjM4LjcwMzY4OTU4cHg7Zm9udC1zdHlsZTpub3JtYWw7Zm9udC12YXJpYW50Om5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zdHJldGNoOm5vcm1hbDtsaW5lLWhlaWdodDoxMDAlO3dyaXRpbmctbW9kZTpsci10Yjt0ZXh0LWFuY2hvcjpzdGFydDtmaWxsOmJsYWNrO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxcHQ7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW9wYWNpdHk6MTtmb250LWZhbWlseTpBcmlhbCI+CiAgICA8dGV4dCB4PSIzNzEuMzkwMTQiIHk9IjIzMS43ODY1Ij5PPC90ZXh0PgogICAgPHRleHQgeD0iMzUuNzQxNTU0IiB5PSI4MjkuMjk0MzEiPkg8L3RleHQ+CiAgICA8dGV4dCB4PSI3MjYuNzMzNjQiIHk9IjgyOS4yOTQzMSI+SDwvdGV4dD4KICAgIDx0ZXh0IHg9IjM3OS4xMzQyMiIgeT0iNjI2LjU0NTA0Ij5DPC90ZXh0PgogIDwvZz4KICA8ZyBzdHlsZT0iZmlsbDpub25lO2ZpbGwtb3BhY2l0eTowLjc1O2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpibGFjaztzdHJva2Utd2lkdGg6MTU7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSI+CiAgICA8cGF0aCBkPSJNIDIzMC44Nzc2LDY3Ny44MjAwMSBMIDM2OS44OTY5Myw1OTcuNTU3MTYiIC8+CiAgICA8cGF0aCBkPSJNIDcwMy43NzcxNSw2NzcuODIwMDEgTCA1NjQuNzU3ODIsNTk3LjU1NzE2IiAvPgogICAgPHBhdGggZD0iTSA0MzYuNDg3MzIsMjU5Ljg0MjcxIEwgNDM2LjQ4NzMyLDQyNC4zMzk3OSIgLz4KICAgIDxwYXRoIGQ9Ik0gNDk3LjU2Mjk3LDI1OS44NDI3MSBMIDQ5Ny41NjI5Nyw0MjQuMzM5NzkiIC8+CiAgPC9nPgo8L3N2Zz4K",
    "ext": "svg",
    "name": "formol",
    "size": 1086,
    "type": "image/svg+xml"
  },
  "select": "#800000",
  "select-menu": "#800000"
}