🧾 Components: form inputs

Form fields collect data from the visitor. Every field has a name — what the visitor enters is written into the widget data under that key and read back as {{name}}.

🔧 Shared by every field

• name — required. The key in the data.
• required — cannot be left empty.
• disabled — disabled state.
• onChangeAction — runs a function when the value changes.

📋 Form

Groups fields into a single submit. Box props (gap, padding …) work here too.

• onSubmitAction — the function to run on submit.

<Form gap={3} onSubmitAction={{ functionName: 'send_lead', loadingBehavior: 'container' }}>
  <Label value="Name" fieldName="name" />
  <Input name="name" placeholder="Your name" required />
  <Label value="Email" fieldName="email" />
  <Input name="email" inputType="email" required />
  <Button label="Submit" submit block />
</Form>

⌨️ Input

• inputType — text | email | password | number | tel | url
• placeholder, defaultValue, pattern, autoFocus

📝 Textarea

Multi-line text. Extra props: rows, placeholder, defaultValue.

🔽 Select

• options — a list of [{ label, value, disabled }].
• placeholder, defaultValue, block (full width).

<Select
  name="plan"
  options={[
    { label: "Pro", value: "pro" },
    { label: "Business", value: "business" }
  ]}
  placeholder="Choose a plan"
  block
/>

☑️ Checkbox

label, defaultChecked. The value is stored as true/false.

🔘 RadioGroup

options, defaultValue, direction (row | col).

📅 DatePicker

placeholder, defaultValue, min, max. Dates are stored as YYYY-MM-DD.

🎚 Slider

min, max, step, defaultValue, label, showValue, minLabel, maxLabel.

🔐 How entered data reaches your server

What the visitor types lives in the browser only. For it to reach an API, the function must list those names in its additional inputs — the server keeps only declared names and drops everything else.

function: send_lead (call_api)
additional inputs: name, email
inputs: { "name": "{{name}}", "email": "{{email}}" }

A field name that is not declared arrives empty on the server.