Form composition·loomora/Form

Form

A form composition helper that renders a list of Input definitions and optional actions inside a configurable element.

Interactive live playground

Tweak props, change states, and see the live component respond in real time.

Live

How to call

Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.

import { Form } from 'loomora'

<Form inputs={[
  { type: 'text', label: 'Name', properties: { value, onChange } },
  { type: 'check', label: 'Accept terms', properties: { checked, onChange } },
]} actions={[{ children: 'Save', type: 'submit' }]} />

API reference

Important public props and how they affect rendering.

6 props

Prop	Type	Default	Description
inputs	InputProps[]	[]	Input definitions rendered by the dispatcher.
as	ElementType	'form'	Element used as the outer form container.
actions	ButtonProps[]	[]	Buttons rendered after the input collection.
inputsWrapper	InputsWrapperProps	—	Grid wrapper configuration for inputs.
loading	boolean	false	Propagated to action button loading states.
condition	boolean	true	Returns null when false.

← All components map Back to live example ↑