Switch

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

• h-switch-content
• h-switch-control

The root element has a switch 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-switch 
    controlId="firstname" 
    controlName="firstname" 
    disabled="true">
        <h-switch-control></h-switch-control>

        <h-switch-content>
            <span slot="label">label</span>
            <p slot="description">some switch description</p>
        </h-switch-content>
</h-switch>

<h-switch 
    controlid="firstname" 
    controlname="firstname" 
    disabled="true" 
    class="switch switch_disabled">
        <h-switch-control class="switch__control">
            <input 
                type="checkbox" 
                class="switch__input" 
                id="firstname" 
                name="firstname" 
                disabled>
                    <label 
                        class="switch__label" 
                        for="firstname"></label>
        </h-switch-control>

        <h-switch-content class="switch__content">
            <label 
                class="label"
                for="firstname">
                    <span>label</span>
            </label>

            <div class="switch__description">
                <p>some switch description</p>
            </div>
        </h-switch-content>
</h-switch>

Inner h-switch components

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

h-switch-control

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

Attribute name	Type	Default	Description
id	string	''
name	string	''
disabled	boolean	false
required	boolean	false
hidden	boolean	false
readonly	boolean	false
checked	boolean	false
value	string	''

h-switch-content

The h-switch-content renders a label with additional description for html switch control. It uses slots to render label and description. Description is optional. The root element has a switch__content class.

Example

standalone switch control

sourceoutput

<h-switch-control 
    controlId="firstname" 
    controlName="firstname" 
    disabled="true"></h-switch-control>

<h-switch-control 
    controlid="firstname" 
    controlname="firstname" 
    disabled="true" 
    class="switch__control">
    <input 
        type="checkbox" 
        class="switch__input" 
        id="firstname" 
        name="firstname" 
        disabled>

        <label 
            class="switch__label" 
            form="firstname"></label>
</h-switch-control>

Label with description

sourceoutput

<h-switch-content>
    <span slot="label">label</span>
    <p slot="description">some switch description</p>
</h-switch-content>

<h-switch-content class="switch__content">
    <label class="label">
        <span>label</span>
    </label>

    <div class="switch__description">
        <p>some switch description</p>
    </div>
</h-switch-content>

Only label

sourceoutput

<h-switch-content>
    <span slot="label">label</span>
</h-switch-content>

<h-switch-content class="switch__content">
    <label class="label">
        <span>label</span>
    </label>
</h-switch-content>