Input¶

Groups of components that are responsible for rendering a different types of a html input control with some additional content. The root components is <h-input>, it wraps whole form control, for specific control parts we have a specialized component as:

h-input-content
h-input-control
h-input-unit
h-input-icon

The root element has a input class.

Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.

Example¶

sourceoutput

<h-input 
    controlId="firstname" 
    controlName="firstname">
        <h-input-control></h-input-control>
        <h-input-unit>$</h-input-unit>
        <h-input-icon iconName="icon-x"></h-input-icon>
</h-input>

<h-input 
    controlid="firstname" 
    controlname="firstname" 
    class="input">
    <h-input-control class="input__control">
        <input 
            id="firstname" 
            name="firstname" 
            type="text">
    </h-input-control>

    <h-input-unit class="input__unit">$</h-input-unit>

    <h-input-icon 
        iconname="icon-x" 
        class="input__icon">
            <svg class="icon input__icon">
                <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
            </svg>
    </h-input-icon>
</h-input>

Inner h-input components¶

We provide several components that can be used to create an input control.

h-input-control¶

The h-input-control renders a html input control. It can be used standalone, separate from h-input It accepts multiple attributes, that can be passed to control directly (if used standalone), or we can set them to h-input. The root element has a input__control class.

Attribute name	Type	Default	Description
controlId	string	''
controlName	string	''
disabled	boolean	false
required	boolean	false
hidden	boolean	false
readonly	boolean	false
checked	boolean	false
value	string	''
placeholder	string	''
size	string	''	defines an input size, other available values: small and large
withButton	boolean	false
type	string	text	input control type

sourceoutput

<h-input-control 
    controlId="firstname" 
    controlName="firstname"></h-input-control>

<h-input-control 
    class="input__control" 
    controlid="firstname" 
    controlname="firstname">
        <input 
            id="firstname" 
            name="firstname" 
            type="text">
</h-input-control>

h-input-icon¶

The h-input-icon renders an icon for input. The root element has a input__icon class.

Attributes¶

Attribute name	Type	Default	Description
iconName	string	''	`id` of an icon from svg icon set file.

sourceoutput

<h-input-icon iconName="icon-x"></h-input-icon>

<h-input-icon 
    iconname="icon-x" 
    class="input__icon">
        <svg class="icon input__icon">
            <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
        </svg>
</h-input-icon>

h-input-unit¶

The h-input-unit renders a unit for input. The root element has a input__unit class.

sourceoutput

<h-input-unit>$</h-input-unit>

<h-input-unit class="input__unit">$</h-input-unit>