Skip to content

Singleware/ui-form

Repository files navigation

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

Properties

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

Methods

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

Slots

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

Events

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

Install

Using npm:

npm i @singleware/ui-form

License

MIT © Silas B. Domingos