Control

Groups of components that wraps a specific parts of form control. The root components is <h-control>, it wraps whole form control, for specific control parts we have a specialized component as:

• h-control-label
• h-control-content
• h-control-element
• h-control-errors
• h-control-additional-content

The root element has a control 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-control>
    <h-control-label>
        <label for="firstname-new">firstname</label>
    </h-control-label>

    <h-control-content>
        <h-control-element>
            <label 
                class="input" 
                for="firstname-new">
                <input 
                    type="text" 
                    id="firstname-new" 
                    name="firstname-new" 
                    class="input__control"/>
            </label>
        </h-control-element>
    </h-control-content>

    <h-control-additional-content> helper</h-control-additional-content>

    <h-control-errors>
        <ul>
            <li>Control error</li>
        </ul>
    </h-control-errors>
</h-control>

<h-control class="control">
    <h-control-label class="control__label">
        <label for="firstname-new">firstname</label>
    </h-control-label>

    <h-control-content class="control">
        <h-control-element class="control__element">
            <label 
                class="input" 
                for="firstname-new">
                    <input 
                        type="text" 
                        id="firstname-new" 
                        name="firstname-new" 
                        class="input__control">
            </label>
        </h-control-element>
    </h-control-content>

    <h-control-additional-content class="control__additional-content control__additional-content_type-text"> helper</h-control-additional-content>

    <h-control-errors class="control__errors">
        <ul>
            <li>Control error</li>
        </ul>
    </h-control-errors>
</h-control>

Inner h-control components

We provide several components that can be used to create a form control.

h-control-label

The h-control-label wraps a html <label>. The root element has a control__label class.

h-control-content

The h-control-content is a container for h-control-element. The root element has a control__content class.

Attributes

Attribute name	Type	Default	Description
size	string	full	defines a control content size, other available values: auto, full, half, quarter and three-quarters

h-control-element

The h-control-element wraps a html form control. The root element has a control__element class.

h-control-additional-content

The h-control-additional-content Can be used to add additional content for a control element. The root element has a control__additional-content class and control__additional-content_type-text for text content.

Attributes

Attribute name	Type	Default	Description
type	string	text	additional content type

h-control-errors

The h-control-errors wraps a html form control validation errors. The root element has a control__errors class.