UI-Field

Custom HTML element used to mirror field properties into the first element in its center slot, also provides the common field structures with label, prepend and append slots.

State Attributes

Name	Description
empty	Automatically assigned when the center slot element is empty
checked	Automatically assigned when the center slot element is checked
invalid	Automatically assigned when the center slot element is invalid

Mirrored Properties

Name	Description
empty	Get the empty state from the center slot element
type	Get and set the element type in the center slot
name	Get and set the element name in the center slot
value	Get and set the element value in the center slot
checked	Get and set the checked state in the center slot element
defaultValue	Get and set the defaultValue in the center slot element
defaultChecked	Get and set the defaultChecked state in the center slot element
required	Get and set the required state in the center slot element
readOnly	Get and set the readOnly state in the center slot element
disabled	Get and set the disabled state in the center slot element

Properties

Name	Description
label	Get and set the field label
orientation	Get and set the field orientation. Use: row or column value

Methods

Name	Description
focus	Move the focus to the center slot element
reset	Reset the current value from the center slot element to its default value
checkValidity	Get the validity of the center slot element
setCustomValidity	Set a custom validity in the center slot element

Slots

Name	Description
label	Element to shows the field label
prepend	Element to show things before the center slot, like: icons, buttons, etc
center	Element to show the field target, like: inputs, selects, etc
append	Element to show things after the center slot, like: icons, buttons, etc

Events

Name	Description
change	Dispatched when the field is changed

Install

Using npm:

npm i @singleware/ui-field

License

MIT © Silas B. Domingos