Render the checkbox as a checkbox, switch or toggle button
Protected Optional _clsProtected _inputProtected Optional _labelProtected _valueProtected baseAdds standard style. You may want to remove this if you don't want the standard look of a form field.
Protected controlReadonly dataSet arbitrary data on a component.
Should be used with caution as this data is not typed.
Protected defaultThe value that was set before adding this component to a parent.
Protected fireFires a change event if the field's value is different since it got focus
Readonly isOptional parentWhen this item is added to a Component this is set to the parent Component
Optional renderNormally components are rendered to its parent component's element. But in some cases like menu's it's desired to render them to the root and position them absolute.
Protected resetThe value this field resets to when a form is reset. Changes when a form loads.
Optional stateID used for storing state of the component in the State storage.
If stateId is given it will also be used as itemId
If not set then the component won't store it's state.
Readonly tagThe tagname used for the root HTMLElement of this component
Validate the field on blur
Protected Optional valueUsed for "change" event
Set attributes of the DOM element
Autocomplete value
Class name to add to element
Some common classes to add for layout:
Other:
Disable component
CSS flex value
CSS flex value
The height in scalable pixels
width
Hide element
The field's hint text
Set the HTML contents of the component (innerHTML)
The field's icon rendered at the left inside the field
Element ID
Get the DOM HTMLInputElement
Protected itemComponent item ID that can be used to lookup the Component inside a Component with Component.findItem() and Component.findItemIndex();
if stateId is given it will also be used as itemId
The child components of this component
The field's label
Form element name which will be the key in values If omitted the field won't be included in the form values.
The field's name
When the field is empty this will be displayed inside the field
Make field read only
Check if the component has been rendered and added to the DOM tree
Make field required
Required or not
Make it resizable
Set inline style
The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
Set the innerText
Title of the dom element
Set the field value
Set the width in scalable pixels
The width is applied in rem units divided by 10. Because the font-size of the html element has a font-size of 62.5% this is equals the amount of pixels, but it can be scaled easily for different themes.
A wrapper DIV element that contains input and toolbar for input buttons like an expand button for a drop down
Protected applyProtected applyProtected buildProtected
Build state for the component
saveState();
Protected captureCascade down the component hierarchy
When the function returns false then the cascading will be stopped. The current Component will be finished!
Protected createProtected createProtected createProtected createFind ancestor
The method traverses the Component's ancestors (heading toward the document root) until it finds one where the given function returns true.
When the function returns true the item will be returned. Otherwise it will move up to the next parent.
Find parent by instance type of the parent
const form = textField.findAncestorByType(Form);
Find a child at any level by element ID, itemId property, Component instance or custom function.
It cascades down the component hierarchy. See also {@see findChildByType}
Find child by instance type of the parent
const form = textField.findAncestorByType(Form);
Find children at any level by element ID, itemId property, Component instance or custom function.
It cascades down the component hierarchy. See also {@see findChildByType}
Find children by instance type of the parent
const form = textField.findAncestorByType(Form);
Find the item by element ID, itemId property, Component instance or custom function.
If you want to search the component tree hierarchy use {@see findChild()}
Find the item by element ID, itemId property, Component instance or custom function
Fire an event
When a listener returns false this function will return false too.
Rest ...args: Parameters<FieldEventMap<any>[K]>Protected fireProtected getProtected getProtected hasHide this component
This sets the "hidden" attribute on the DOM element which set's CSS display:none. You can change this to fade with css class "goui-fade-in" and "goui-fade-out"
If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.
Protected internalProtected internalProtected internalProtected internalProtected isAdd a listener
Optional options: ObservableListenerOptsProtected onProtected onProtected onProtected onProtected relayProtected renderProtected renderProtected
Can be overriden to wrap the component
Protected renderProtected restoreProtected
Restore state of the component in this function. It's called before render in init().
saveState();
Protected saveProtected setProtected setupProtected
When buttons with menus are added it is handy to delay the validation on blur. Because when the user will click something in the menu it will blur the field and you probably don't want it to validate at that point. It's important that the menu will return focus to the field and sets the value afterward.
Remove listener
Protected validateStatic uniqueIDGenerated using TypeDoc
Checkbox field
See
Form