Operations 2 steps · 13 fields

Time off request

Leave type, dates, half days, handover and approver for small teams without an HR system.

Launch for free

Get a hosted link and a responses inbox in a minute. No backend, no credit card.

Or set it up yourself

Live preview

Form definition JSON · 129 lines

{  "id": "time-off-request",  "title": "Request time off",  "submit": { "label": "Send request" },  "steps": [    {      "id": "you",      "title": "Your details",      "fields": [        {          "key": "name",          "type": "text",          "label": "Full name",          "validation": { "required": true }        },        {          "key": "email",          "type": "email",          "label": "Work email",          "inputMode": "email",          "validation": { "required": true }        },        {          "key": "managerEmail",          "type": "email",          "label": "Manager’s email",          "inputMode": "email",          "validation": { "required": true }        }      ]    },    {      "id": "leave",      "title": "Your leave",      "fields": [        {          "key": "type",          "type": "radio",          "label": "Type of leave",          "options": [            { "value": "vacation", "label": "Vacation" },            { "value": "sick", "label": "Sick leave" },            { "value": "personal", "label": "Personal day" },            { "value": "parental", "label": "Parental leave" },            { "value": "bereavement", "label": "Bereavement leave" },            { "value": "unpaid", "label": "Unpaid leave" },            { "value": "other", "label": "Other" }          ],          "validation": { "required": true }        },        {          "key": "typeOther",          "type": "text",          "label": "What kind of leave?",          "show": [{ "field": "type", "eq": "other" }],          "validation": { "required": true }        },        {          "key": "doctorNote",          "type": "radio",          "label": "Will you provide a doctor’s note?",          "layout": "inline",          "show": [{ "field": "type", "eq": "sick" }],          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" },            { "value": "not-needed", "label": "Not needed" }          ]        },        {          "key": "partial",          "type": "radio",          "label": "Full or half days?",          "options": [            { "value": "full", "label": "Full days" },            {              "value": "half-first",              "label": "Half day on the first day"            },            {              "value": "half-last",              "label": "Half day on the last day"            },            { "value": "half-only", "label": "A single half day" }          ],          "defaultValue": "full",          "validation": { "required": true }        },        {          "key": "start",          "type": "date",          "label": "Start date",          "validation": { "required": true }        },        {          "key": "end",          "type": "date",          "label": "End date",          "show": [{ "field": "partial", "neq": "half-only" }],          "validation": { "required": true }        },        {          "key": "days",          "type": "number",          "label": "Working days requested",          "helperText": "Count a half day as 0.5.",          "validation": { "required": true, "min": 0.5, "max": 365 }        },        {          "key": "cover",          "type": "text",          "label": "Who will cover for you?"        },        {          "key": "handover",          "type": "textarea",          "label": "Anything that needs attention while you’re away?",          "rows": 3        },        {          "key": "note",          "type": "textarea",          "label": "Note for your manager",          "rows": 2        }      ]    }  ]}

Use it with the npm packages

Copy the JSON into a file in your app, install the renderer and pass the definition to it. The same JSON works with @formhaus/vue.

npm i @formhaus/core @formhaus/react

tsx

import { FormRenderer } from '@formhaus/react';
import '@formhaus/core/style.css';
import definition from './form.json';

export function Form() {
  return (
    <FormRenderer
      definition={definition}
      onSubmit={(values) => console.log(values)}
    />
  );
}

See Getting started for validation, steps and custom components.

Time off request

Use it with the npm packages ​

Use it with the npm packages