Checkbox

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

• h-checkbox-content
• h-checkbox-control

The root element has a checkbox class.

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

Attributes

Attribute name	Type	Default	Description
controlId	string	''
controlName	string	''
disabled	boolean	false
required	boolean	false
hidden	boolean	false
readonly	boolean	false
checked	boolean	false
partiallyChecked	boolean	false
value	string	''

Example

sourceoutput

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

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

<h-checkbox 
    controlid="firstname" 
    controlname="firstname" 
    disabled="true" 
    class="checkbox checkbox_disabled">
    <h-checkbox-control class="checkbox__control">
        <input 
            type="checkbox" 
            class="checkbox__input" 
            id="firstname" 
            name="firstname" 
            disabled>

        <label 
            class="checkbox__label" 
            for="firstname"></label>
    </h-checkbox-control>

    <h-checkbox-content class="checkbox__content">
        <label 
            class="label" 
            for="firstname">
                <span>label</span>
        </label>

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

Inner h-checkbox components

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

h-checkbox-control

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

h-checkbox-content

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

Label with description

sourceoutput

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

<h-checkbox-content class="checkbox__content">
    <label 
        class="label" 
        for="firstname">
            <span>firstname</span>
    </label>

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

Only label

sourceoutput

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

<h-checkbox-content class="checkbox__content">
    <label class="label">
        <span>label</span>
    </label>
</h-checkbox-content>