Singleware UI form package.

Usage no npm install needed!

<script type="module">
  import singlewareUiForm from 'https://cdn.skypack.dev/@singleware/ui-form';



Custom HTML element used to mirror field properties in its first-level children, while the form is invalid, any element with submit type will be disabled by default. Also provides the common form structure with header, content and footer slots.

State Attributes

Name Description
empty Automatically assigned when all first-level children are empty
invalid Automatically assigned when one or more first-level children are invalid

Mirrored Properties

Name Description
value Get or set an object with the name and value from all first-level children
required Get the required state or set it in all first-level children
readOnly Get the readOnly state or set it in all first-level children
disabled Get the disabled state or set it in all first-level children


Name Description
name Get or set the element name
empty Get the empty state based on all first-level children
unwind Get or set the unwind state determining whether the value property must be unrolled or not
orientation Get and set the field orientation. Use: row or column value


Name Description
focus Move the focus to the first-level child that can be focused
submit Notify the form submission (Dispatches submit or invalid event)
reset Reset all first-level children to its initial values (Dispatches the reset event)
checkValidity Check whether all first-level children are valid or not


Name Description
header Element to contain any header child, always on top of the form
content Element to contain any content child, always on middle of the form
footer Element to contain any footer child, always on bottom of the form


Name Description
change Dispatched when some field in the form is changed
submit Dispatched when the form is submitted
reset Dispatched when the form was reset


Using npm:

npm i @singleware/ui-form


MIT © Silas B. Domingos