Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Form group

Use the form group object to control spacing and layout in forms.

Regular form grouping

#

The combination of a form label and an input field are usually wrapped inside a .o-form-group object. The consistent markup pattern makes it easy to manipulate grouped form elements.

<div class="o-form-group-layout o-form-group-layout--standard">
    <div class="o-form-group">
        <label class="o-form-group__label" for="defaultFormNameId">Name</label>
        <div class="o-form-group__controls">
            <input class="c-input" type="email" value="John Doe" id="defaultFormNameId" />
        </div>
    </div>
    <div class="o-form-group">
        <label class="o-form-group__label" for="defaultFormEmailId">Email address</label>
        <div class="o-form-group__controls">
            <input class="c-input" type="email" value="user@name.com" id="defaultFormEmailId" />
        </div>
    </div>
    <div class="o-form-group">
        <label class="o-form-group__label" for="defaultFormpasswordId">Password</label>
        <div class="o-form-group__controls">
            <div class="c-input-with-icon">
                <input class="c-input" type="password" id="defaultFormpasswordId" />
                <button class="c-input-with-icon__toggle" data-password-toggle="data-password-toggle">
                    <div class="o-svg-icon o-svg-icon-eye  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C9.79087 8 8.00001 9.79086 8.00001 12C8.00001 14.2091 9.79087 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" fill="#7A7A7A" />
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M23.8941 11.5521C23.8943 11.5525 23.8944 11.5528 23 12C23.8944 12.4472 23.8943 12.4475 23.8941 12.4479L23.8925 12.4511L23.889 12.458L23.8777 12.4802C23.8681 12.4987 23.8547 12.5247 23.8373 12.5576C23.8025 12.6233 23.752 12.7168 23.686 12.834C23.5542 13.0684 23.3602 13.3985 23.1057 13.7925C22.5979 14.5787 21.8432 15.6294 20.8545 16.6839C18.8955 18.7736 15.8995 21 12 21C8.1005 21 5.10449 18.7736 3.14547 16.6839C2.15684 15.6294 1.40207 14.5787 0.894343 13.7925C0.639857 13.3985 0.445799 13.0684 0.313979 12.834C0.248031 12.7168 0.197547 12.6233 0.162761 12.5576C0.145364 12.5247 0.131882 12.4987 0.122345 12.4802L0.110997 12.458L0.107546 12.4511L0.106377 12.4488C0.106194 12.4484 0.10558 12.4472 1.00001 12C0.10558 11.5528 0.105748 11.5525 0.105932 11.5521L0.107546 11.5489L0.110997 11.542L0.122345 11.5198C0.131882 11.5013 0.145364 11.4753 0.162761 11.4424C0.197547 11.3767 0.248031 11.2832 0.313979 11.166C0.445799 10.9316 0.639857 10.6015 0.894343 10.2075C1.40207 9.42131 2.15684 8.3706 3.14547 7.31606C5.10449 5.22644 8.1005 3 12 3C15.8995 3 18.8955 5.22644 20.8545 7.31606C21.8432 8.3706 22.5979 9.42131 23.1057 10.2075C23.3602 10.6015 23.5542 10.9316 23.686 11.166C23.752 11.2832 23.8025 11.3767 23.8373 11.4424C23.8547 11.4753 23.8681 11.5013 23.8777 11.5198L23.889 11.542L23.8925 11.5489L23.8941 11.5521ZM2.57442 12.7075C2.39493 12.4296 2.25004 12.1889 2.14075 12C2.25004 11.8111 2.39493 11.5704 2.57442 11.2925C3.03544 10.5787 3.71817 9.6294 4.60454 8.68394C6.39553 6.77356 8.89952 5 12 5C15.1005 5 17.6045 6.77356 19.3955 8.68394C20.2818 9.6294 20.9646 10.5787 21.4256 11.2925C21.6051 11.5704 21.75 11.8111 21.8593 12C21.75 12.1889 21.6051 12.4296 21.4256 12.7075C20.9646 13.4213 20.2818 14.3706 19.3955 15.3161C17.6045 17.2264 15.1005 19 12 19C8.89952 19 6.39553 17.2264 4.60454 15.3161C3.71817 14.3706 3.03544 13.4213 2.57442 12.7075Z" fill="#7A7A7A" />
                            <path d="M23 12L23.8941 11.5521C24.0348 11.8336 24.0348 12.1664 23.8941 12.4479L23 12Z" fill="#7A7A7A" />
                            <path d="M0.105932 11.5521L1.00001 12L0.10558 12.4472C-0.0351837 12.1657 -0.0348316 11.8336 0.105932 11.5521Z" fill="#7A7A7A" />
                        </svg>
                    </div>
                    <div class="o-svg-icon o-svg-icon-eye-off  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0)">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M1.70001 0.3L23.7 22.3C24.1 22.7 24.1 23.3 23.7 23.7C23.5 23.9 23.2 24 23 24C22.8 24 22.5 23.9 22.3 23.7L17.8 19.2C16.1 20.4 14.1 21 12 21C4.50001 21 0.300012 12.8 0.100012 12.4C-0.0999878 12.1 -0.0999878 11.8 0.100012 11.5C1.30001 9.4 2.80001 7.6 4.60001 6L0.300012 1.7C-0.0999878 1.3 -0.0999878 0.7 0.300012 0.3C0.700012 -0.1 1.30001 -0.1 1.70001 0.3ZM12.5 13.9L10 11.4C10 11.5652 9.96971 11.7 9.94246 11.8212C9.92022 11.9202 9.90001 12.0101 9.90001 12.1C9.90001 12.6 10.1 13.1 10.5 13.5C10.9 13.8 11.4 14 11.9 14C12.1 14 12.3 14 12.5 13.9ZM2.10001 12C3.10001 13.6 6.60001 19 12 19C13.5 19 15 18.6 16.3 17.9L14 15.6C13.4 15.9 12.7 16.2 12 16.2H11.9C10.9 16.2 9.90001 15.8 9.20001 15.1C8.40001 14.4 7.90001 13.4 7.90001 12.3C7.90001 11.5 8.10001 10.7 8.50001 10L6.00001 7.4C4.40001 8.7 3.10001 10.2 2.10001 12Z" fill="#7A7A7A" />
                                <path d="M12 5C11.4 5 10.7 5.1 10.1 5.2C9.60001 5.3 9.00001 5.1 8.90001 4.5C8.80001 3.9 9.10001 3.4 9.70001 3.3C10.4 3.1 11.2 3 12 3C18.8027 3 22.8905 9.74605 23.741 11.1498C23.8282 11.2936 23.8814 11.3814 23.9 11.4C24.1 11.7 24.1 12 23.9 12.3C23.2 13.5 22.5 14.7 21.6 15.7C21.4 16 21.1 16.1 20.8 16.1C20.6 16.1 20.4 16.1 20.2 15.9C19.8 15.6 19.7 14.9 20.1 14.5C20.8 13.8 21.4 12.9 21.9 12C20.9 10.4 17.4 5 12 5Z" fill="#7A7A7A" />
                            </g>
                            <defs>
                                <clipPath id="clip0">
                                    <rect width="24" height="24" fill="white" />
                                </clipPath>
                            </defs>
                        </svg>
                    </div>
                </button>
            </div>
        </div>
    </div>
    <div class="o-form-group">
        <div class="o-form-group__label o-form-group__label--with-helper">
            <label for="defaultFormSelectId">Preference</label>
            <button class="c-button c-button--borderless-muted c-button--small c-button--icon" type="button" data-tooltip="preference-tooltip" data-tooltip-placement="right">
                <span class="c-button__content">
                    <div class="o-svg-icon o-svg-icon-circle-help  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12Z" fill="#595959" />
                            <path d="M12 14C11.7348 14 11.4804 13.8946 11.2929 13.7071C11.1054 13.5196 11 13.2652 11 13V12C11 11.7348 11.1054 11.4804 11.2929 11.2929C11.4804 11.1054 11.7348 11 12 11C12.2652 11 12.5196 11.1054 12.7071 11.2929C12.8946 11.4804 13 11.7348 13 12V13C13 13.2652 12.8946 13.5196 12.7071 13.7071C12.5196 13.8946 12.2652 14 12 14ZM10.5 16.5C10.5 16.1022 10.658 15.7206 10.9393 15.4393C11.2206 15.158 11.6022 15 12 15C12.3978 15 12.7794 15.158 13.0607 15.4393C13.342 15.7206 13.5 16.1022 13.5 16.5C13.5 16.8978 13.342 17.2794 13.0607 17.5607C12.7794 17.842 12.3978 18 12 18C11.6022 18 11.2206 17.842 10.9393 17.5607C10.658 17.2794 10.5 16.8978 10.5 16.5Z" fill="#595959" />
                            <path d="M12.3899 7.811C11.4329 7.766 10.6299 8.301 10.4859 9.164C10.4356 9.41907 10.2878 9.6445 10.0741 9.79249C9.86029 9.94047 9.59729 9.99938 9.34081 9.95672C9.08434 9.91406 8.85456 9.77319 8.7002 9.56397C8.54584 9.35476 8.47903 9.09364 8.51394 8.836C8.86994 6.7 10.8169 5.734 12.4849 5.814C13.3389 5.854 14.2179 6.161 14.8939 6.793C15.5869 7.44 15.9999 8.368 15.9999 9.5C15.9999 10.791 15.4919 11.749 14.6169 12.332C13.8139 12.867 12.8289 13 11.9999 13C11.7347 13 11.4804 12.8946 11.2928 12.7071C11.1053 12.5196 10.9999 12.2652 10.9999 12C10.9999 11.7348 11.1053 11.4804 11.2928 11.2929C11.4804 11.1054 11.7347 11 11.9999 11C12.6699 11 13.1859 10.883 13.5079 10.668C13.7579 10.501 13.9999 10.208 13.9999 9.5C13.9999 8.882 13.7879 8.497 13.5279 8.254C13.2509 7.995 12.8479 7.834 12.3899 7.811Z" fill="#595959" />
                        </svg>
                    </div>
                    <div class="u-sr-accessible">Show info
                    </div>
                </span>
            </button>
            <div class="c-tooltip" role="tooltip" id="preference-tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                <div class="c-tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
            </div>
        </div>
        <div class="c-select-holder">
            <select class="c-select" id="defaultFormSelectId">
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
            </select>
        </div>
    </div>
    <div class="o-form-group">
        <input class="c-button c-button--primary" type="submit" value="Save" />
    </div>
</div>
.o-form-group-layout.o-form-group-layout--standard

    .o-form-group
        label.o-form-group__label(for="defaultFormNameId") Name
        .o-form-group__controls
            input.c-input(type="email" value="John Doe" id="defaultFormNameId")

    .o-form-group
        label.o-form-group__label(for="defaultFormEmailId") Email address
        .o-form-group__controls
            input.c-input(type="email" value="user@name.com" id="defaultFormEmailId")

    .o-form-group
        label.o-form-group__label(for="defaultFormpasswordId") Password
        .o-form-group__controls
            .c-input-with-icon
                input.c-input(type="password" id="defaultFormpasswordId")
                button.c-input-with-icon__toggle(data-password-toggle)
                    +icon('eye')
                    +icon('eye-off')

    .o-form-group
        .o-form-group__label.o-form-group__label--with-helper
            label(for="defaultFormSelectId") Preference
            +c-button({ size: 'small', layout: 'icon-only', icon: 'circle-help', skin: 'borderless-muted' })(type="button" data-tooltip="preference-tooltip" data-tooltip-placement="right") Show info
            .c-tooltip(role="tooltip" id="preference-tooltip")
                | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                .c-tooltip__arrow(data-popper-arrow)
        .c-select-holder
            select.c-select(id="defaultFormSelectId")
                option Option A
                option Option B
                option Option C

    .o-form-group
        input.c-button.c-button--primary(type="submit" value="Save")

Form (horizontal)

# 
<div class="o-form-group-layout o-form-group-layout--horizontal">
    <div class="o-form-group">
        <label class="o-form-group__label" for="horizontalFormNameId">Name</label>
        <div class="o-form-group__controls">
            <input class="c-input" type="email" value="John Doe" id="horizontalFormNameId" />
        </div>
    </div>
    <div class="o-form-group">
        <label class="o-form-group__label" for="horizontalFormEmailId">Email address</label>
        <div class="o-form-group__controls">
            <input class="c-input" type="email" value="user@name.com" id="horizontalFormEmailId" />
        </div>
    </div>
    <div class="o-form-group">
        <label class="o-form-group__label" for="horizontalFormPasswordId">Password</label>
        <div class="o-form-group__controls">
            <div class="c-input-with-icon">
                <input class="c-input" type="password" id="horizontalFormPasswordId" />
                <button class="c-input-with-icon__toggle" data-password-toggle="data-password-toggle">
                    <div class="o-svg-icon o-svg-icon-eye  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C9.79087 8 8.00001 9.79086 8.00001 12C8.00001 14.2091 9.79087 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" fill="#7A7A7A" />
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M23.8941 11.5521C23.8943 11.5525 23.8944 11.5528 23 12C23.8944 12.4472 23.8943 12.4475 23.8941 12.4479L23.8925 12.4511L23.889 12.458L23.8777 12.4802C23.8681 12.4987 23.8547 12.5247 23.8373 12.5576C23.8025 12.6233 23.752 12.7168 23.686 12.834C23.5542 13.0684 23.3602 13.3985 23.1057 13.7925C22.5979 14.5787 21.8432 15.6294 20.8545 16.6839C18.8955 18.7736 15.8995 21 12 21C8.1005 21 5.10449 18.7736 3.14547 16.6839C2.15684 15.6294 1.40207 14.5787 0.894343 13.7925C0.639857 13.3985 0.445799 13.0684 0.313979 12.834C0.248031 12.7168 0.197547 12.6233 0.162761 12.5576C0.145364 12.5247 0.131882 12.4987 0.122345 12.4802L0.110997 12.458L0.107546 12.4511L0.106377 12.4488C0.106194 12.4484 0.10558 12.4472 1.00001 12C0.10558 11.5528 0.105748 11.5525 0.105932 11.5521L0.107546 11.5489L0.110997 11.542L0.122345 11.5198C0.131882 11.5013 0.145364 11.4753 0.162761 11.4424C0.197547 11.3767 0.248031 11.2832 0.313979 11.166C0.445799 10.9316 0.639857 10.6015 0.894343 10.2075C1.40207 9.42131 2.15684 8.3706 3.14547 7.31606C5.10449 5.22644 8.1005 3 12 3C15.8995 3 18.8955 5.22644 20.8545 7.31606C21.8432 8.3706 22.5979 9.42131 23.1057 10.2075C23.3602 10.6015 23.5542 10.9316 23.686 11.166C23.752 11.2832 23.8025 11.3767 23.8373 11.4424C23.8547 11.4753 23.8681 11.5013 23.8777 11.5198L23.889 11.542L23.8925 11.5489L23.8941 11.5521ZM2.57442 12.7075C2.39493 12.4296 2.25004 12.1889 2.14075 12C2.25004 11.8111 2.39493 11.5704 2.57442 11.2925C3.03544 10.5787 3.71817 9.6294 4.60454 8.68394C6.39553 6.77356 8.89952 5 12 5C15.1005 5 17.6045 6.77356 19.3955 8.68394C20.2818 9.6294 20.9646 10.5787 21.4256 11.2925C21.6051 11.5704 21.75 11.8111 21.8593 12C21.75 12.1889 21.6051 12.4296 21.4256 12.7075C20.9646 13.4213 20.2818 14.3706 19.3955 15.3161C17.6045 17.2264 15.1005 19 12 19C8.89952 19 6.39553 17.2264 4.60454 15.3161C3.71817 14.3706 3.03544 13.4213 2.57442 12.7075Z" fill="#7A7A7A" />
                            <path d="M23 12L23.8941 11.5521C24.0348 11.8336 24.0348 12.1664 23.8941 12.4479L23 12Z" fill="#7A7A7A" />
                            <path d="M0.105932 11.5521L1.00001 12L0.10558 12.4472C-0.0351837 12.1657 -0.0348316 11.8336 0.105932 11.5521Z" fill="#7A7A7A" />
                        </svg>
                    </div>
                    <div class="o-svg-icon o-svg-icon-eye-off  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0)">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M1.70001 0.3L23.7 22.3C24.1 22.7 24.1 23.3 23.7 23.7C23.5 23.9 23.2 24 23 24C22.8 24 22.5 23.9 22.3 23.7L17.8 19.2C16.1 20.4 14.1 21 12 21C4.50001 21 0.300012 12.8 0.100012 12.4C-0.0999878 12.1 -0.0999878 11.8 0.100012 11.5C1.30001 9.4 2.80001 7.6 4.60001 6L0.300012 1.7C-0.0999878 1.3 -0.0999878 0.7 0.300012 0.3C0.700012 -0.1 1.30001 -0.1 1.70001 0.3ZM12.5 13.9L10 11.4C10 11.5652 9.96971 11.7 9.94246 11.8212C9.92022 11.9202 9.90001 12.0101 9.90001 12.1C9.90001 12.6 10.1 13.1 10.5 13.5C10.9 13.8 11.4 14 11.9 14C12.1 14 12.3 14 12.5 13.9ZM2.10001 12C3.10001 13.6 6.60001 19 12 19C13.5 19 15 18.6 16.3 17.9L14 15.6C13.4 15.9 12.7 16.2 12 16.2H11.9C10.9 16.2 9.90001 15.8 9.20001 15.1C8.40001 14.4 7.90001 13.4 7.90001 12.3C7.90001 11.5 8.10001 10.7 8.50001 10L6.00001 7.4C4.40001 8.7 3.10001 10.2 2.10001 12Z" fill="#7A7A7A" />
                                <path d="M12 5C11.4 5 10.7 5.1 10.1 5.2C9.60001 5.3 9.00001 5.1 8.90001 4.5C8.80001 3.9 9.10001 3.4 9.70001 3.3C10.4 3.1 11.2 3 12 3C18.8027 3 22.8905 9.74605 23.741 11.1498C23.8282 11.2936 23.8814 11.3814 23.9 11.4C24.1 11.7 24.1 12 23.9 12.3C23.2 13.5 22.5 14.7 21.6 15.7C21.4 16 21.1 16.1 20.8 16.1C20.6 16.1 20.4 16.1 20.2 15.9C19.8 15.6 19.7 14.9 20.1 14.5C20.8 13.8 21.4 12.9 21.9 12C20.9 10.4 17.4 5 12 5Z" fill="#7A7A7A" />
                            </g>
                            <defs>
                                <clipPath id="clip0">
                                    <rect width="24" height="24" fill="white" />
                                </clipPath>
                            </defs>
                        </svg>
                    </div>
                </button>
            </div>
        </div>
    </div>
    <div class="o-form-group">
        <div class="o-form-group__label o-form-group__label--with-helper">
            <label for="horizontalFormSelectId">Preference</label>
            <button class="c-button c-button--borderless-muted c-button--small c-button--icon" type="button" data-tooltip="preference-tooltip-2" data-tooltip-placement="right">
                <span class="c-button__content">
                    <div class="o-svg-icon o-svg-icon-circle-help  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12Z" fill="#595959" />
                            <path d="M12 14C11.7348 14 11.4804 13.8946 11.2929 13.7071C11.1054 13.5196 11 13.2652 11 13V12C11 11.7348 11.1054 11.4804 11.2929 11.2929C11.4804 11.1054 11.7348 11 12 11C12.2652 11 12.5196 11.1054 12.7071 11.2929C12.8946 11.4804 13 11.7348 13 12V13C13 13.2652 12.8946 13.5196 12.7071 13.7071C12.5196 13.8946 12.2652 14 12 14ZM10.5 16.5C10.5 16.1022 10.658 15.7206 10.9393 15.4393C11.2206 15.158 11.6022 15 12 15C12.3978 15 12.7794 15.158 13.0607 15.4393C13.342 15.7206 13.5 16.1022 13.5 16.5C13.5 16.8978 13.342 17.2794 13.0607 17.5607C12.7794 17.842 12.3978 18 12 18C11.6022 18 11.2206 17.842 10.9393 17.5607C10.658 17.2794 10.5 16.8978 10.5 16.5Z" fill="#595959" />
                            <path d="M12.3899 7.811C11.4329 7.766 10.6299 8.301 10.4859 9.164C10.4356 9.41907 10.2878 9.6445 10.0741 9.79249C9.86029 9.94047 9.59729 9.99938 9.34081 9.95672C9.08434 9.91406 8.85456 9.77319 8.7002 9.56397C8.54584 9.35476 8.47903 9.09364 8.51394 8.836C8.86994 6.7 10.8169 5.734 12.4849 5.814C13.3389 5.854 14.2179 6.161 14.8939 6.793C15.5869 7.44 15.9999 8.368 15.9999 9.5C15.9999 10.791 15.4919 11.749 14.6169 12.332C13.8139 12.867 12.8289 13 11.9999 13C11.7347 13 11.4804 12.8946 11.2928 12.7071C11.1053 12.5196 10.9999 12.2652 10.9999 12C10.9999 11.7348 11.1053 11.4804 11.2928 11.2929C11.4804 11.1054 11.7347 11 11.9999 11C12.6699 11 13.1859 10.883 13.5079 10.668C13.7579 10.501 13.9999 10.208 13.9999 9.5C13.9999 8.882 13.7879 8.497 13.5279 8.254C13.2509 7.995 12.8479 7.834 12.3899 7.811Z" fill="#595959" />
                        </svg>
                    </div>
                    <div class="u-sr-accessible">Show info
                    </div>
                </span>
            </button>
            <div class="c-tooltip" role="tooltip" id="preference-tooltip-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                <div class="c-tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
            </div>
        </div>
        <div class="c-select-holder">
            <select class="c-select" id="horizontalFormSelectId">
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
            </select>
        </div>
    </div>
    <div class="o-form-group">
        <input class="c-button c-button--primary" type="submit" value="Save" />
    </div>
</div>
.o-form-group-layout.o-form-group-layout--horizontal

    .o-form-group
        label.o-form-group__label(for="horizontalFormNameId") Name
        .o-form-group__controls
            input.c-input(type="email" value="John Doe" id="horizontalFormNameId")

    .o-form-group
        label.o-form-group__label(for="horizontalFormEmailId") Email address
        .o-form-group__controls
            input.c-input(type="email" value="user@name.com" id="horizontalFormEmailId")

    .o-form-group
        label.o-form-group__label(for="horizontalFormPasswordId") Password
        .o-form-group__controls
            .c-input-with-icon
                input.c-input(type="password" id="horizontalFormPasswordId")
                button.c-input-with-icon__toggle(data-password-toggle)
                    +icon('eye')
                    +icon('eye-off')

    .o-form-group
        .o-form-group__label.o-form-group__label--with-helper
            label(for="horizontalFormSelectId") Preference
            +c-button({ size: 'small', layout: 'icon-only', icon: 'circle-help', skin: 'borderless-muted' })(type="button" data-tooltip="preference-tooltip-2" data-tooltip-placement="right") Show info
            .c-tooltip(role="tooltip" id="preference-tooltip-2")
                | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                .c-tooltip__arrow(data-popper-arrow)
        .c-select-holder
            select.c-select(id="horizontalFormSelectId")
                option Option A
                option Option B
                option Option C

    .o-form-group
        input.c-button.c-button--primary(type="submit" value="Save")

Form (grid)

# 
<div class="o-form-group-layout o-form-group-layout--standard">
    <div class="u-spacer-bottom">
        <div class="o-grid">
            <div class="o-grid-col-6">
                <div class="o-form-group">
                    <label class="o-form-group__label" for="formGridNameId">Name</label>
                    <div class="o-form-group__controls">
                        <input class="c-input" type="email" value="John Doe" id="formGridNameId" />
                    </div>
                </div>
                <div class="o-form-group">
                    <label class="o-form-group__label" for="formGridEmailId">Email address</label>
                    <div class="o-form-group__controls">
                        <input class="c-input" type="email" value="user@name.com" id="formGridEmailId" />
                    </div>
                </div>
            </div>
            <div class="o-grid-col-6">
                <div class="o-form-group">
                    <label class="o-form-group__label" for="formGridPasswordId">Password</label>
                    <div class="o-form-group__controls">
                        <div class="c-input-with-icon">
                            <input class="c-input" type="password" id="formGridPasswordId" />
                            <button class="c-input-with-icon__toggle" data-password-toggle="data-password-toggle">
                                <div class="o-svg-icon o-svg-icon-eye  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C9.79087 8 8.00001 9.79086 8.00001 12C8.00001 14.2091 9.79087 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" fill="#7A7A7A" />
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M23.8941 11.5521C23.8943 11.5525 23.8944 11.5528 23 12C23.8944 12.4472 23.8943 12.4475 23.8941 12.4479L23.8925 12.4511L23.889 12.458L23.8777 12.4802C23.8681 12.4987 23.8547 12.5247 23.8373 12.5576C23.8025 12.6233 23.752 12.7168 23.686 12.834C23.5542 13.0684 23.3602 13.3985 23.1057 13.7925C22.5979 14.5787 21.8432 15.6294 20.8545 16.6839C18.8955 18.7736 15.8995 21 12 21C8.1005 21 5.10449 18.7736 3.14547 16.6839C2.15684 15.6294 1.40207 14.5787 0.894343 13.7925C0.639857 13.3985 0.445799 13.0684 0.313979 12.834C0.248031 12.7168 0.197547 12.6233 0.162761 12.5576C0.145364 12.5247 0.131882 12.4987 0.122345 12.4802L0.110997 12.458L0.107546 12.4511L0.106377 12.4488C0.106194 12.4484 0.10558 12.4472 1.00001 12C0.10558 11.5528 0.105748 11.5525 0.105932 11.5521L0.107546 11.5489L0.110997 11.542L0.122345 11.5198C0.131882 11.5013 0.145364 11.4753 0.162761 11.4424C0.197547 11.3767 0.248031 11.2832 0.313979 11.166C0.445799 10.9316 0.639857 10.6015 0.894343 10.2075C1.40207 9.42131 2.15684 8.3706 3.14547 7.31606C5.10449 5.22644 8.1005 3 12 3C15.8995 3 18.8955 5.22644 20.8545 7.31606C21.8432 8.3706 22.5979 9.42131 23.1057 10.2075C23.3602 10.6015 23.5542 10.9316 23.686 11.166C23.752 11.2832 23.8025 11.3767 23.8373 11.4424C23.8547 11.4753 23.8681 11.5013 23.8777 11.5198L23.889 11.542L23.8925 11.5489L23.8941 11.5521ZM2.57442 12.7075C2.39493 12.4296 2.25004 12.1889 2.14075 12C2.25004 11.8111 2.39493 11.5704 2.57442 11.2925C3.03544 10.5787 3.71817 9.6294 4.60454 8.68394C6.39553 6.77356 8.89952 5 12 5C15.1005 5 17.6045 6.77356 19.3955 8.68394C20.2818 9.6294 20.9646 10.5787 21.4256 11.2925C21.6051 11.5704 21.75 11.8111 21.8593 12C21.75 12.1889 21.6051 12.4296 21.4256 12.7075C20.9646 13.4213 20.2818 14.3706 19.3955 15.3161C17.6045 17.2264 15.1005 19 12 19C8.89952 19 6.39553 17.2264 4.60454 15.3161C3.71817 14.3706 3.03544 13.4213 2.57442 12.7075Z" fill="#7A7A7A" />
                                        <path d="M23 12L23.8941 11.5521C24.0348 11.8336 24.0348 12.1664 23.8941 12.4479L23 12Z" fill="#7A7A7A" />
                                        <path d="M0.105932 11.5521L1.00001 12L0.10558 12.4472C-0.0351837 12.1657 -0.0348316 11.8336 0.105932 11.5521Z" fill="#7A7A7A" />
                                    </svg>
                                </div>
                                <div class="o-svg-icon o-svg-icon-eye-off  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0)">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.70001 0.3L23.7 22.3C24.1 22.7 24.1 23.3 23.7 23.7C23.5 23.9 23.2 24 23 24C22.8 24 22.5 23.9 22.3 23.7L17.8 19.2C16.1 20.4 14.1 21 12 21C4.50001 21 0.300012 12.8 0.100012 12.4C-0.0999878 12.1 -0.0999878 11.8 0.100012 11.5C1.30001 9.4 2.80001 7.6 4.60001 6L0.300012 1.7C-0.0999878 1.3 -0.0999878 0.7 0.300012 0.3C0.700012 -0.1 1.30001 -0.1 1.70001 0.3ZM12.5 13.9L10 11.4C10 11.5652 9.96971 11.7 9.94246 11.8212C9.92022 11.9202 9.90001 12.0101 9.90001 12.1C9.90001 12.6 10.1 13.1 10.5 13.5C10.9 13.8 11.4 14 11.9 14C12.1 14 12.3 14 12.5 13.9ZM2.10001 12C3.10001 13.6 6.60001 19 12 19C13.5 19 15 18.6 16.3 17.9L14 15.6C13.4 15.9 12.7 16.2 12 16.2H11.9C10.9 16.2 9.90001 15.8 9.20001 15.1C8.40001 14.4 7.90001 13.4 7.90001 12.3C7.90001 11.5 8.10001 10.7 8.50001 10L6.00001 7.4C4.40001 8.7 3.10001 10.2 2.10001 12Z" fill="#7A7A7A" />
                                            <path d="M12 5C11.4 5 10.7 5.1 10.1 5.2C9.60001 5.3 9.00001 5.1 8.90001 4.5C8.80001 3.9 9.10001 3.4 9.70001 3.3C10.4 3.1 11.2 3 12 3C18.8027 3 22.8905 9.74605 23.741 11.1498C23.8282 11.2936 23.8814 11.3814 23.9 11.4C24.1 11.7 24.1 12 23.9 12.3C23.2 13.5 22.5 14.7 21.6 15.7C21.4 16 21.1 16.1 20.8 16.1C20.6 16.1 20.4 16.1 20.2 15.9C19.8 15.6 19.7 14.9 20.1 14.5C20.8 13.8 21.4 12.9 21.9 12C20.9 10.4 17.4 5 12 5Z" fill="#7A7A7A" />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0">
                                                <rect width="24" height="24" fill="white" />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="o-form-group">
                    <label class="o-form-group__label" for="formGridSelectId">Preference</label>
                    <div class="c-select-holder">
                        <select class="c-select" id="formGridSelectId">
                            <option>Option A</option>
                            <option>Option B</option>
                            <option>Option C</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="c-toolbar">
        <div class="c-toolbar__right">
            <div class="c-toolbar__item">
                <button class="c-button c-button--borderless">Cancel</button>
                <input class="c-button c-button--primary" type="submit" value="Save" />
            </div>
        </div>
    </div>
</div>
.o-form-group-layout.o-form-group-layout--standard
    .u-spacer-bottom
        .o-grid
            .o-grid-col-6
                .o-form-group
                    label.o-form-group__label(for="formGridNameId") Name
                    .o-form-group__controls
                        input.c-input(type="email" value="John Doe" id="formGridNameId")

                .o-form-group
                    label.o-form-group__label(for="formGridEmailId") Email address
                    .o-form-group__controls
                        input.c-input(type="email" value="user@name.com" id="formGridEmailId")

            .o-grid-col-6
                .o-form-group
                    label.o-form-group__label(for="formGridPasswordId") Password
                    .o-form-group__controls
                        .c-input-with-icon
                            input.c-input(type="password" id="formGridPasswordId")
                            button.c-input-with-icon__toggle(data-password-toggle)
                                +icon('eye')
                                +icon('eye-off')

                .o-form-group
                    label.o-form-group__label(for="formGridSelectId") Preference
                    .c-select-holder
                        select.c-select(id="formGridSelectId")
                            option Option A
                            option Option B
                            option Option C

    .c-toolbar
        .c-toolbar__right
            .c-toolbar__item
                button.c-button.c-button--borderless Cancel
                input.c-button.c-button--primary(type="submit" value="Save")

Form (inline)

# 
<div class="o-form-group-layout o-form-group-layout--inline">
    <div class="o-form-group">
        <label class="o-form-group__label" for="inlineFormEmailId">Email address</label>
        <div class="o-form-group__controls">
            <input class="c-input" type="email" value="user@name.com" id="inlineFormEmailId" />
        </div>
    </div>
    <div class="o-form-group">
        <label class="o-form-group__label" for="inlineFormPasswordId">Password</label>
        <div class="o-form-group__controls">
            <div class="c-input-with-icon">
                <input class="c-input" type="password" id="inlineFormPasswordId" />
                <button class="c-input-with-icon__toggle" data-password-toggle="data-password-toggle">
                    <div class="o-svg-icon o-svg-icon-eye  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C9.79087 8 8.00001 9.79086 8.00001 12C8.00001 14.2091 9.79087 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" fill="#7A7A7A" />
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M23.8941 11.5521C23.8943 11.5525 23.8944 11.5528 23 12C23.8944 12.4472 23.8943 12.4475 23.8941 12.4479L23.8925 12.4511L23.889 12.458L23.8777 12.4802C23.8681 12.4987 23.8547 12.5247 23.8373 12.5576C23.8025 12.6233 23.752 12.7168 23.686 12.834C23.5542 13.0684 23.3602 13.3985 23.1057 13.7925C22.5979 14.5787 21.8432 15.6294 20.8545 16.6839C18.8955 18.7736 15.8995 21 12 21C8.1005 21 5.10449 18.7736 3.14547 16.6839C2.15684 15.6294 1.40207 14.5787 0.894343 13.7925C0.639857 13.3985 0.445799 13.0684 0.313979 12.834C0.248031 12.7168 0.197547 12.6233 0.162761 12.5576C0.145364 12.5247 0.131882 12.4987 0.122345 12.4802L0.110997 12.458L0.107546 12.4511L0.106377 12.4488C0.106194 12.4484 0.10558 12.4472 1.00001 12C0.10558 11.5528 0.105748 11.5525 0.105932 11.5521L0.107546 11.5489L0.110997 11.542L0.122345 11.5198C0.131882 11.5013 0.145364 11.4753 0.162761 11.4424C0.197547 11.3767 0.248031 11.2832 0.313979 11.166C0.445799 10.9316 0.639857 10.6015 0.894343 10.2075C1.40207 9.42131 2.15684 8.3706 3.14547 7.31606C5.10449 5.22644 8.1005 3 12 3C15.8995 3 18.8955 5.22644 20.8545 7.31606C21.8432 8.3706 22.5979 9.42131 23.1057 10.2075C23.3602 10.6015 23.5542 10.9316 23.686 11.166C23.752 11.2832 23.8025 11.3767 23.8373 11.4424C23.8547 11.4753 23.8681 11.5013 23.8777 11.5198L23.889 11.542L23.8925 11.5489L23.8941 11.5521ZM2.57442 12.7075C2.39493 12.4296 2.25004 12.1889 2.14075 12C2.25004 11.8111 2.39493 11.5704 2.57442 11.2925C3.03544 10.5787 3.71817 9.6294 4.60454 8.68394C6.39553 6.77356 8.89952 5 12 5C15.1005 5 17.6045 6.77356 19.3955 8.68394C20.2818 9.6294 20.9646 10.5787 21.4256 11.2925C21.6051 11.5704 21.75 11.8111 21.8593 12C21.75 12.1889 21.6051 12.4296 21.4256 12.7075C20.9646 13.4213 20.2818 14.3706 19.3955 15.3161C17.6045 17.2264 15.1005 19 12 19C8.89952 19 6.39553 17.2264 4.60454 15.3161C3.71817 14.3706 3.03544 13.4213 2.57442 12.7075Z" fill="#7A7A7A" />
                            <path d="M23 12L23.8941 11.5521C24.0348 11.8336 24.0348 12.1664 23.8941 12.4479L23 12Z" fill="#7A7A7A" />
                            <path d="M0.105932 11.5521L1.00001 12L0.10558 12.4472C-0.0351837 12.1657 -0.0348316 11.8336 0.105932 11.5521Z" fill="#7A7A7A" />
                        </svg>
                    </div>
                    <div class="o-svg-icon o-svg-icon-eye-off  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0)">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M1.70001 0.3L23.7 22.3C24.1 22.7 24.1 23.3 23.7 23.7C23.5 23.9 23.2 24 23 24C22.8 24 22.5 23.9 22.3 23.7L17.8 19.2C16.1 20.4 14.1 21 12 21C4.50001 21 0.300012 12.8 0.100012 12.4C-0.0999878 12.1 -0.0999878 11.8 0.100012 11.5C1.30001 9.4 2.80001 7.6 4.60001 6L0.300012 1.7C-0.0999878 1.3 -0.0999878 0.7 0.300012 0.3C0.700012 -0.1 1.30001 -0.1 1.70001 0.3ZM12.5 13.9L10 11.4C10 11.5652 9.96971 11.7 9.94246 11.8212C9.92022 11.9202 9.90001 12.0101 9.90001 12.1C9.90001 12.6 10.1 13.1 10.5 13.5C10.9 13.8 11.4 14 11.9 14C12.1 14 12.3 14 12.5 13.9ZM2.10001 12C3.10001 13.6 6.60001 19 12 19C13.5 19 15 18.6 16.3 17.9L14 15.6C13.4 15.9 12.7 16.2 12 16.2H11.9C10.9 16.2 9.90001 15.8 9.20001 15.1C8.40001 14.4 7.90001 13.4 7.90001 12.3C7.90001 11.5 8.10001 10.7 8.50001 10L6.00001 7.4C4.40001 8.7 3.10001 10.2 2.10001 12Z" fill="#7A7A7A" />
                                <path d="M12 5C11.4 5 10.7 5.1 10.1 5.2C9.60001 5.3 9.00001 5.1 8.90001 4.5C8.80001 3.9 9.10001 3.4 9.70001 3.3C10.4 3.1 11.2 3 12 3C18.8027 3 22.8905 9.74605 23.741 11.1498C23.8282 11.2936 23.8814 11.3814 23.9 11.4C24.1 11.7 24.1 12 23.9 12.3C23.2 13.5 22.5 14.7 21.6 15.7C21.4 16 21.1 16.1 20.8 16.1C20.6 16.1 20.4 16.1 20.2 15.9C19.8 15.6 19.7 14.9 20.1 14.5C20.8 13.8 21.4 12.9 21.9 12C20.9 10.4 17.4 5 12 5Z" fill="#7A7A7A" />
                            </g>
                            <defs>
                                <clipPath id="clip0">
                                    <rect width="24" height="24" fill="white" />
                                </clipPath>
                            </defs>
                        </svg>
                    </div>
                </button>
            </div>
        </div>
    </div>
    <div class="o-form-group">
        <input class="c-button c-button--primary" type="submit" value="Save" />
    </div>
</div>
.o-form-group-layout.o-form-group-layout--inline

    .o-form-group
        label.o-form-group__label(for="inlineFormEmailId") Email address
        .o-form-group__controls
            input.c-input(type="email" value="user@name.com" id="inlineFormEmailId")

    .o-form-group
        label.o-form-group__label(for="inlineFormPasswordId") Password
        .o-form-group__controls
            .c-input-with-icon
                input.c-input(type="password" id="inlineFormPasswordId")
                button.c-input-with-icon__toggle(data-password-toggle)
                    +icon('eye')
                    +icon('eye-off')

    .o-form-group
        input.c-button.c-button--primary(type="submit" value="Save")

Form validation

#
Please enter a valid name
Please enter a valid email address
Please enter another option.
<div class="o-form-group-layout o-form-group-layout--standard">
    <div class="o-form-group o-form-group--error">
        <label class="o-form-group__label" for="formValidationnameId">Name</label>
        <div class="o-form-group__controls">
            <input class="c-input" type="email" value="John Doe" id="formValidationnameId" />
            <div class="c-form-help-text c-form-help-text--error">Please enter a valid name</div>
        </div>
    </div>
    <div class="o-form-group o-form-group--error">
        <label class="o-form-group__label" for="formValidationEmailId">Email address</label>
        <div class="o-form-group__controls">
            <input class="c-input" type="email" value="user@name.com" id="formValidationEmailId" />
            <div class="c-form-help-text c-form-help-text--error">Please enter a valid email address</div>
        </div>
    </div>
    <div class="o-form-group o-form-group--error">
        <label class="o-form-group__label">Value</label>
        <div class="o-form-group__controls">
            <div class="c-radio-group c-radio-group--inline">
                <div class="c-radio">
                    <label>
                        <input type="radio" name="radio12" />Inline Value 1
                    </label>
                </div>
                <div class="c-radio">
                    <label>
                        <input type="radio" name="radio12" />Inline Value 2
                    </label>
                </div>
                <div class="c-radio">
                    <label>
                        <input type="radio" name="radio12" checked="checked" />Inline Value 3
                    </label>
                </div>
            </div>
            <div class="c-form-help-text c-form-help-text--error">Please enter another option.</div>
        </div>
    </div>
    <div class="o-form-group o-form-group--error">
        <label class="o-form-group__label" for="formValidationSelectId">Preference</label>
        <div class="c-select-holder">
            <select class="c-select" id="formValidationSelectId">
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
            </select>
        </div>
    </div>
    <div class="o-form-group o-form-group--error">
        <label class="o-form-group__label" for="textareaId">Label</label>
        <textarea class="c-textarea" rows="5" id="textareaId"></textarea>
    </div>
    <div class="o-form-group">
        <input class="c-button c-button--primary" type="submit" value="Save" />
    </div>
</div>
.o-form-group-layout.o-form-group-layout--standard

    .o-form-group.o-form-group--error
        label.o-form-group__label(for="formValidationnameId") Name
        .o-form-group__controls
            input.c-input(type="email" value="John Doe" id="formValidationnameId")
            .c-form-help-text.c-form-help-text--error Please enter a valid name
    .o-form-group.o-form-group--error
        label.o-form-group__label(for="formValidationEmailId") Email address
        .o-form-group__controls
            input.c-input(type="email" value="user@name.com" id="formValidationEmailId")
            .c-form-help-text.c-form-help-text--error Please enter a valid email address

    .o-form-group.o-form-group--error
        label.o-form-group__label Value
        .o-form-group__controls
            .c-radio-group.c-radio-group--inline
                .c-radio
                    label
                        input(type="radio" name="radio12")
                        | Inline Value 1
                .c-radio
                    label
                        input(type="radio" name="radio12")
                        | Inline Value 2
                .c-radio
                    label
                        input(type="radio" name="radio12" checked)
                        | Inline Value 3
            .c-form-help-text.c-form-help-text--error Please enter another option.

    .o-form-group.o-form-group--error
        label.o-form-group__label(for="formValidationSelectId") Preference
        .c-select-holder
            select.c-select(id="formValidationSelectId")
                option Option A
                option Option B
                option Option C

    .o-form-group.o-form-group--error
        label.o-form-group__label(for="textareaId") Label
        textarea.c-textarea(rows="5" id="textareaId")

    .o-form-group
        input.c-button.c-button--primary(type="submit" value="Save")

Form disabled

#
€ 
<form class="o-form-group-layout o-form-group-layout--standard">
    <fieldset disabled="disabled">
        <div class="o-form-group">
            <label class="o-form-group__label" for="disabledFormNameId">Name</label>
            <div class="o-form-group__controls">
                <input class="c-input" type="text" id="disabledFormNameId" value="John Doe" />
            </div>
        </div>
        <div class="o-form-group">
            <label class="o-form-group__label" for="disabledFormEmailId">Email</label>
            <div class="o-form-group__controls">
                <input class="c-input" type="text" id="disabledFormEmailId" value="user@name.com" />
            </div>
        </div>
        <div class="o-form-group">
            <label class="o-form-group__label" for="disabledFormPasswordId">Password</label>
            <div class="o-form-group__controls">
                <div class="c-input-with-icon">
                    <input class="c-input" type="password" id="disabledFormPasswordId" value="password" />
                    <button class="c-input-with-icon__toggle" data-password-toggle="data-password-toggle">
                        <div class="o-svg-icon o-svg-icon-eye  ">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C9.79087 8 8.00001 9.79086 8.00001 12C8.00001 14.2091 9.79087 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" fill="#7A7A7A" />
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M23.8941 11.5521C23.8943 11.5525 23.8944 11.5528 23 12C23.8944 12.4472 23.8943 12.4475 23.8941 12.4479L23.8925 12.4511L23.889 12.458L23.8777 12.4802C23.8681 12.4987 23.8547 12.5247 23.8373 12.5576C23.8025 12.6233 23.752 12.7168 23.686 12.834C23.5542 13.0684 23.3602 13.3985 23.1057 13.7925C22.5979 14.5787 21.8432 15.6294 20.8545 16.6839C18.8955 18.7736 15.8995 21 12 21C8.1005 21 5.10449 18.7736 3.14547 16.6839C2.15684 15.6294 1.40207 14.5787 0.894343 13.7925C0.639857 13.3985 0.445799 13.0684 0.313979 12.834C0.248031 12.7168 0.197547 12.6233 0.162761 12.5576C0.145364 12.5247 0.131882 12.4987 0.122345 12.4802L0.110997 12.458L0.107546 12.4511L0.106377 12.4488C0.106194 12.4484 0.10558 12.4472 1.00001 12C0.10558 11.5528 0.105748 11.5525 0.105932 11.5521L0.107546 11.5489L0.110997 11.542L0.122345 11.5198C0.131882 11.5013 0.145364 11.4753 0.162761 11.4424C0.197547 11.3767 0.248031 11.2832 0.313979 11.166C0.445799 10.9316 0.639857 10.6015 0.894343 10.2075C1.40207 9.42131 2.15684 8.3706 3.14547 7.31606C5.10449 5.22644 8.1005 3 12 3C15.8995 3 18.8955 5.22644 20.8545 7.31606C21.8432 8.3706 22.5979 9.42131 23.1057 10.2075C23.3602 10.6015 23.5542 10.9316 23.686 11.166C23.752 11.2832 23.8025 11.3767 23.8373 11.4424C23.8547 11.4753 23.8681 11.5013 23.8777 11.5198L23.889 11.542L23.8925 11.5489L23.8941 11.5521ZM2.57442 12.7075C2.39493 12.4296 2.25004 12.1889 2.14075 12C2.25004 11.8111 2.39493 11.5704 2.57442 11.2925C3.03544 10.5787 3.71817 9.6294 4.60454 8.68394C6.39553 6.77356 8.89952 5 12 5C15.1005 5 17.6045 6.77356 19.3955 8.68394C20.2818 9.6294 20.9646 10.5787 21.4256 11.2925C21.6051 11.5704 21.75 11.8111 21.8593 12C21.75 12.1889 21.6051 12.4296 21.4256 12.7075C20.9646 13.4213 20.2818 14.3706 19.3955 15.3161C17.6045 17.2264 15.1005 19 12 19C8.89952 19 6.39553 17.2264 4.60454 15.3161C3.71817 14.3706 3.03544 13.4213 2.57442 12.7075Z" fill="#7A7A7A" />
                                <path d="M23 12L23.8941 11.5521C24.0348 11.8336 24.0348 12.1664 23.8941 12.4479L23 12Z" fill="#7A7A7A" />
                                <path d="M0.105932 11.5521L1.00001 12L0.10558 12.4472C-0.0351837 12.1657 -0.0348316 11.8336 0.105932 11.5521Z" fill="#7A7A7A" />
                            </svg>
                        </div>
                        <div class="o-svg-icon o-svg-icon-eye-off  ">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0)">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.70001 0.3L23.7 22.3C24.1 22.7 24.1 23.3 23.7 23.7C23.5 23.9 23.2 24 23 24C22.8 24 22.5 23.9 22.3 23.7L17.8 19.2C16.1 20.4 14.1 21 12 21C4.50001 21 0.300012 12.8 0.100012 12.4C-0.0999878 12.1 -0.0999878 11.8 0.100012 11.5C1.30001 9.4 2.80001 7.6 4.60001 6L0.300012 1.7C-0.0999878 1.3 -0.0999878 0.7 0.300012 0.3C0.700012 -0.1 1.30001 -0.1 1.70001 0.3ZM12.5 13.9L10 11.4C10 11.5652 9.96971 11.7 9.94246 11.8212C9.92022 11.9202 9.90001 12.0101 9.90001 12.1C9.90001 12.6 10.1 13.1 10.5 13.5C10.9 13.8 11.4 14 11.9 14C12.1 14 12.3 14 12.5 13.9ZM2.10001 12C3.10001 13.6 6.60001 19 12 19C13.5 19 15 18.6 16.3 17.9L14 15.6C13.4 15.9 12.7 16.2 12 16.2H11.9C10.9 16.2 9.90001 15.8 9.20001 15.1C8.40001 14.4 7.90001 13.4 7.90001 12.3C7.90001 11.5 8.10001 10.7 8.50001 10L6.00001 7.4C4.40001 8.7 3.10001 10.2 2.10001 12Z" fill="#7A7A7A" />
                                    <path d="M12 5C11.4 5 10.7 5.1 10.1 5.2C9.60001 5.3 9.00001 5.1 8.90001 4.5C8.80001 3.9 9.10001 3.4 9.70001 3.3C10.4 3.1 11.2 3 12 3C18.8027 3 22.8905 9.74605 23.741 11.1498C23.8282 11.2936 23.8814 11.3814 23.9 11.4C24.1 11.7 24.1 12 23.9 12.3C23.2 13.5 22.5 14.7 21.6 15.7C21.4 16 21.1 16.1 20.8 16.1C20.6 16.1 20.4 16.1 20.2 15.9C19.8 15.6 19.7 14.9 20.1 14.5C20.8 13.8 21.4 12.9 21.9 12C20.9 10.4 17.4 5 12 5Z" fill="#7A7A7A" />
                                </g>
                                <defs>
                                    <clipPath id="clip0">
                                        <rect width="24" height="24" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>
                    </button>
                </div>
            </div>
        </div>
        <div class="o-form-group">
            <div class="o-form-group__label o-form-group__label--with-helper">
                <label for="disabledFormPreferenceId">Preference</label>
                <button class="c-button c-button--borderless-muted c-button--small c-button--icon" type="button" data-tooltip="helper-disabledFormPreferenceId" data-tooltip-placement="right">
                    <span class="c-button__content">
                        <div class="o-svg-icon o-svg-icon-circle-help  ">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12Z" fill="#595959" />
                                <path d="M12 14C11.7348 14 11.4804 13.8946 11.2929 13.7071C11.1054 13.5196 11 13.2652 11 13V12C11 11.7348 11.1054 11.4804 11.2929 11.2929C11.4804 11.1054 11.7348 11 12 11C12.2652 11 12.5196 11.1054 12.7071 11.2929C12.8946 11.4804 13 11.7348 13 12V13C13 13.2652 12.8946 13.5196 12.7071 13.7071C12.5196 13.8946 12.2652 14 12 14ZM10.5 16.5C10.5 16.1022 10.658 15.7206 10.9393 15.4393C11.2206 15.158 11.6022 15 12 15C12.3978 15 12.7794 15.158 13.0607 15.4393C13.342 15.7206 13.5 16.1022 13.5 16.5C13.5 16.8978 13.342 17.2794 13.0607 17.5607C12.7794 17.842 12.3978 18 12 18C11.6022 18 11.2206 17.842 10.9393 17.5607C10.658 17.2794 10.5 16.8978 10.5 16.5Z" fill="#595959" />
                                <path d="M12.3899 7.811C11.4329 7.766 10.6299 8.301 10.4859 9.164C10.4356 9.41907 10.2878 9.6445 10.0741 9.79249C9.86029 9.94047 9.59729 9.99938 9.34081 9.95672C9.08434 9.91406 8.85456 9.77319 8.7002 9.56397C8.54584 9.35476 8.47903 9.09364 8.51394 8.836C8.86994 6.7 10.8169 5.734 12.4849 5.814C13.3389 5.854 14.2179 6.161 14.8939 6.793C15.5869 7.44 15.9999 8.368 15.9999 9.5C15.9999 10.791 15.4919 11.749 14.6169 12.332C13.8139 12.867 12.8289 13 11.9999 13C11.7347 13 11.4804 12.8946 11.2928 12.7071C11.1053 12.5196 10.9999 12.2652 10.9999 12C10.9999 11.7348 11.1053 11.4804 11.2928 11.2929C11.4804 11.1054 11.7347 11 11.9999 11C12.6699 11 13.1859 10.883 13.5079 10.668C13.7579 10.501 13.9999 10.208 13.9999 9.5C13.9999 8.882 13.7879 8.497 13.5279 8.254C13.2509 7.995 12.8479 7.834 12.3899 7.811Z" fill="#595959" />
                            </svg>
                        </div>
                        <div class="u-sr-accessible">Show info
                        </div>
                    </span>
                </button>
                <div class="c-tooltip" role="tooltip" id="helper-disabledFormPreferenceId">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo accumsan risus.
                    <div class="c-tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
                </div>
            </div>
            <div class="o-form-group__controls">
                <div class="c-select-holder">
                    <select class="c-select" id="disabledFormPreferenceId">
                        <option>Option A</option>
                        <option>Option B</option>
                        <option>Option C</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="o-form-group">
            <label class="o-form-group__label" for="disabledFormTextareaId">Price</label>
            <div class="o-form-group__controls">
                <textarea class="c-textarea" rows="5" id="textarea"></textarea>
            </div>
        </div>
        <div class="o-form-group">
            <label class="o-form-group__label" for="disabledFormPriceId">Price</label>
            <div class="o-form-group__controls">
                <div class="c-input-group">
                    <div class="c-input-group__input">
                        <input class="c-input" type="number" id="disabledFormPriceId" value="1000" />
                    </div>
                    <div class="c-input-group__append">
                        <span>€</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="o-form-group">
            <label class="o-form-group__label">Radio</label>
            <div class="o-form-group__controls">
                <div class="c-radio-group c-radio-group--inline">
                    <div class="c-radio">
                        <label>
                            <input type="radio" name="disabledFormRadio" checked="checked" />Option A
                        </label>
                    </div>
                    <div class="c-radio">
                        <label>
                            <input type="radio" name="disabledFormRadio" />Option B
                        </label>
                    </div>
                    <div class="c-radio">
                        <label>
                            <input type="radio" name="disabledFormRadio" />Option C
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="o-form-group">
            <label class="o-form-group__label">Checkbox</label>
            <div class="o-form-group__controls">
                <div class="c-checkbox-group c-checkbox-group--inline">
                    <div class="c-checkbox">
                        <label>
                            <input type="checkbox" name="disabledFormCheckbox" checked="checked" />Value 1
                        </label>
                    </div>
                    <div class="c-checkbox">
                        <label>
                            <input type="checkbox" name="disabledFormCheckbox" />Value 2
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="o-form-group">
            <input class="c-button c-button--primary" type="submit" value="Save" />
        </div>
    </fieldset>
</form>
form.o-form-group-layout.o-form-group-layout--standard
    fieldset(disabled)
        +c-form-group({label: 'Name', id: 'disabledFormNameId'})
            +c-input({id: 'disabledFormNameId', value: 'John Doe'})

        +c-form-group({label: 'Email', id: 'disabledFormEmailId'})
            +c-input({id: 'disabledFormEmailId', value: 'user@name.com'})

        +c-form-group({label: 'Password', id: 'disabledFormPasswordId'})
            .c-input-with-icon
                +c-input({type: 'password', id: 'disabledFormPasswordId', value: 'password'})
                button.c-input-with-icon__toggle(data-password-toggle)
                    +icon('eye')
                    +icon('eye-off')

        +c-form-group({label: 'Preference', id: 'disabledFormPreferenceId', helperTooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo accumsan risus.'})
            +c-select({id: 'disabledFormPreferenceId', value: ['Option A', 'Option B', 'Option C']})

        +c-form-group({label: 'Price', id: 'disabledFormTextareaId'})
             +c-textarea({id: 'textarea'})

        +c-form-group({label: 'Price', id: 'disabledFormPriceId'})
            +c-input-group-after({id: 'disabledFormPriceId', type: 'number', text: '€', value: 1000})

        +c-form-group({label: 'Radio'})
            +c-radio-group({name: 'disabledFormRadio', value: ['Option A', 'Option B', 'Option C'], isInline: true, checked: 'Option A'})

        +c-form-group({label: 'Checkbox'})
            +c-checkbox-group({name: 'disabledFormCheckbox', value: ['Value 1', 'Value 2'], isInline: true, checked: 'Value 1'})

        .o-form-group
            input.c-button.c-button--primary(type="submit" value="Save")