Field

Basic

Field Label

Field

.cuz-field-container {
margin-top: 10px;
margin-bottom: 20px;
align-items: flex-end;
}

.cuz-field-label {
margin-bottom: 7px;
line-height: 145%;
}.cuz-field-label:small {
font-size: 13px;
}.cuz-field-label:tiny {
font-size: 12px;
}

.cuz-field-wrapper {
display: flex;
padding-bottom: 8px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: @swatch_17a75a60;
}.cuz-field-wrapper:tiny {
padding-bottom: 6px;
}

.cuz-field {
padding-top: 8px;
padding-right: 40px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
color: @swatch_9fdfd7a1;
font-size: 16px;
line-height: 145%;
}.cuz-field:small {
font-size: 14px;
}.cuz-field:tiny {
font-size: 13px;
}

.cuz-tooltip-trigger {
position: relative;
padding-top: 8px;
justify-content: center;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
}.cuz-tooltip-trigger:main_hover {
opacity: 1;
}.cuz-tooltip-trigger:tiny {
padding-top: 6px;
}

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label</div>
<div class="cuz-field-wrapper">
<div class="cuz-field">Field</div><a data-w-id="51dd8519-01d7-aad1-f2b1-0cb0fa34b7e8" href="#" class="cuz-tooltip-trigger"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="6daba643-4539-1e56-29e1-d0552e2ca186" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
</div>

With Icon

Field Label

Field

.cuz-field-icon-wrapper {
padding-top: 8px;
justify-content: center;
align-items: flex-start;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}.cuz-field-icon-wrapper:tiny {
padding-top: 6px;
}

.cuz-field-icon {
width: 20px;
margin-right: 15px;
}.cuz-field-icon:tiny {
width: 16px;
}.cuz-field-icon:small {
width: 18px;
margin-right: 10px;
}

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label</div>
<div class="cuz-field-wrapper">
<div class="cuz-field-icon-wrapper"><img src="calender.svg" alt="field icon" class="cuz-field-icon"></div>
<div class="cuz-field">Field</div><a data-w-id="88e703c9-1e6f-1b56-6470-fed126de4d72" href="#" class="cuz-tooltip-trigger"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="88e703c9-1e6f-1b56-6470-fed126de4d78" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
</div>

With Copy Icon

Field Label

Field

.cuz-copy-trigger {
padding-top: 8px;
justify-content: center;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}

.cuz-copy-icon {
width: 20px;
margin-left: 15px;
}.cuz-copy-icon:tiny {}.cuz-copy-icon:small {
margin-left: 10px;
}

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label</div>
<div class="cuz-field-wrapper">
<div class="cuz-field">Field</div><a href="#" class="cuz-copy-trigger"><img src="copy.svg" alt="copy" class="cuz-copy-icon"></a><a data-w-id="720b99cb-8a1d-cb95-70a8-fca78bb9dc68" href="#" class="cuz-tooltip-trigger"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="720b99cb-8a1d-cb95-70a8-fca78bb9dc6e" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
</div>

With Note

Field Label

Field

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.

.cuz-field-note {
margin-top: 7px;
font-size: 12px;
line-height: 145%;
}.cuz-field-note:small {
font-size: 11px;
}.cuz-field-note:tiny {
font-size: 10px;
}

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label</div>
<div class="cuz-field-wrapper">
<div class="cuz-field">Field</div><a data-w-id="4f77e456-ddda-8c33-a7c3-304bac72b437" href="#" class="cuz-tooltip-trigger"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="4f77e456-ddda-8c33-a7c3-304bac72b43d" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
<div class="cuz-field-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div>
</div>

All Combined

Field Label

Field

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label</div>
<div class="cuz-field-wrapper">
<div class="cuz-field-icon-wrapper"><img src="calender.svg" alt="field icon" class="cuz-field-icon"></div>
<div class="cuz-field">Field</div><a href="#" class="cuz-copy-trigger"><img src="copy.svg" alt="copy" class="cuz-copy-icon"></a><a data-w-id="6b91ae3c-a269-43c9-be7e-baffc1214117" href="#" class="cuz-tooltip-trigger"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="6b91ae3c-a269-43c9-be7e-baffc121411d" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
<div class="cuz-field-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div>
</div>

Field - Chips

Basic

Field Label

Lorem

Ipsum Dolar Sit

Lorem

With Icon

Field Label

Lorem

Ipsum Dolar Sit

Lorem

Pair

Field Label

English

French

English

Arabic

French

Pair With Icon

Field Label

English

French

English

Arabic

French

Input

Basic

Field Label

Error

Field Label

Some error message.

With Icon

Field Label

Phone

Phone Number

🇨🇦 +1 🇺🇸 +1 🇹🇷 +90

With Note

Field Label

Required Asteriks

Field Label *

All Combined

Field Label *

.cuz-input {
margin-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-style: none;
border-top-width: 1px;
border-top-color: black;
border-right-style: none;
border-right-width: 1px;
border-right-color: black;
border-bottom-style: none;
border-bottom-width: 1px;
border-bottom-color: black;
border-left-style: none;
border-left-width: 1px;
border-left-color: black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
background-color: transparent;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
color: @swatch_9fdfd7a1;
font-size: 16px;
line-height: 145%;
}.cuz-input:main_hover {}.cuz-input:main_focus {
color: @swatch_b27eec10;
}.cuz-input:small {
font-size: 14px;
}.cuz-input:tiny {
height: 34px;
font-size: 13px;
}.cuz-phone-input-wrapper {
position: relative;
display: flex;
max-width: 120px;
margin-right: 10px;
padding-right: 10px;
padding-left: 10px;
border-right-style: solid;
border-right-width: 1px;
border-right-color: @swatch_17a75a60;
background-color: @swatch_aeb749f0;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
}.cuz-phone-input-wrapper:tiny {
padding-bottom: 0px;
}.cuz-phone-input-wrapper:main_hover {
border-bottom-color: @swatch_b27eec10;
}

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label <span class="cuz-required-txt">*</span></div>
<div class="cuz-input-wrapper">
<div class="cuz-field-icon-wrapper"><img src="calender.svg" alt="field icon" class="cuz-field-icon"></div><input type="text" class="cuz-input w-input" maxlength="256" name="Input-2" data-name="Input 2" placeholder="Input" id="Input-2"><a data-w-id="562eedf0-8c9b-e971-1b4e-0019c5c9b633" href="#" class="cuz-tooltip-trigger w-inline-block"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="562eedf0-8c9b-e971-1b4e-0019c5c9b639" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
<div class="cuz-field-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div>
</div>

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Input - Inline

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Select

Basic

Field Label

Text Link Text Link Text Link Text Link Text Link Text Link

Error

Field Label

Text Link Text Link Text Link Text Link Text Link Text Link

Some error message.

With Icon

Field Label

Text Link Text Link Text Link Text Link Text Link Text Link

With Note

Field Label

Text Link Text Link Text Link Text Link Text Link Text Link

Required Asteriks

Field Label *

Text Link Text Link Text Link Text Link Text Link Text Link

All Combined

Field Label *

Text Link Text Link Text Link Text Link Text Link Text Link

Grouped

Field Label *

This is some text inside of a div block.

Text Link

This is some text inside of a div block.

Text Link Text Link Text Link Text Link Text Link

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Text Input

Basic

Field Label

.cuz-textarea {
margin-bottom: 0px;
padding-top: 8px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-style: none;
border-top-width: 1px;
border-top-color: black;
border-right-style: none;
border-right-width: 1px;
border-right-color: black;
border-bottom-style: none;
border-bottom-width: 1px;
border-bottom-color: black;
border-left-style: none;
border-left-width: 1px;
border-left-color: black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
background-color: transparent;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
color: @swatch_9fdfd7a1;
font-size: 16px;
line-height: 145%;
}.cuz-textarea:main_focus {
color: @swatch_b27eec10;
}.cuz-textarea:small {
font-size: 14px;
}.cuz-textarea:tiny {
padding-top: 8px;
font-size: 13px;
}

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label</div>
<div class="cuz-input-wrapper"><textarea placeholder="Example Text" maxlength="5000" id="field" name="field" class="cuz-textarea w-input"></textarea><a data-w-id="d3356b50-2c31-28e6-b4e4-590cd4b262cb" href="#" class="cuz-tooltip-trigger w-inline-block"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="d3356b50-2c31-28e6-b4e4-590cd4b262d1" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
</div>

Error

Field Label

Some error text.

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label</div>
<div class="cuz-input-wrapper cuz-input-error"><textarea placeholder="Example Text" maxlength="5000" id="field-3" name="field-3" data-name="Field 3" class="cuz-textarea w-input"></textarea><a data-w-id="bf697026-3c19-cf62-e98f-ec4f5def7587" href="#" class="cuz-tooltip-trigger w-inline-block"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="bf697026-3c19-cf62-e98f-ec4f5def758d" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
<div class="cuz-field-error-text">Some error text.</div>
</div>

With Icon

Field Label

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label</div>
<div class="cuz-input-wrapper">
<div class="cuz-field-icon-wrapper"><img src="calender.svg" alt="field icon" class="cuz-field-icon"></div><textarea placeholder="Example Text" maxlength="5000" id="field-2" name="field-2" data-name="Field 2" class="cuz-textarea w-input"></textarea><a data-w-id="112b8ae0-54a1-bdd4-781d-233ce4d74c1f" href="#" class="cuz-tooltip-trigger w-inline-block"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="112b8ae0-54a1-bdd4-781d-233ce4d74c25" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
</div>

With Note

Field Label

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label</div>
<div class="cuz-input-wrapper"><textarea placeholder="Example Text" maxlength="5000" id="field-2" name="field-2" data-name="Field 2" class="cuz-textarea w-input"></textarea><a data-w-id="6d912bf9-5146-5133-b800-f71750dccebf" href="#" class="cuz-tooltip-trigger w-inline-block"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="6d912bf9-5146-5133-b800-f71750dccec5" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
<div class="cuz-field-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div>
</div>

Required

Field Label *

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label <span class="cuz-required-txt">*</span></div>
<div class="cuz-input-wrapper"><textarea placeholder="Example Text" maxlength="5000" id="field-2" name="field-2" data-name="Field 2" class="cuz-textarea w-input"></textarea><a data-w-id="6b82a5b4-b25b-7b02-0fde-8044973b67b5" href="#" class="cuz-tooltip-trigger w-inline-block"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="6b82a5b4-b25b-7b02-0fde-8044973b67bb" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
</div>

All Combined

Field Label *

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label <span class="cuz-required-txt">*</span></div>
<div class="cuz-input-wrapper">
<div class="cuz-field-icon-wrapper"><img src="calender.svg" alt="field icon" class="cuz-field-icon"></div><textarea placeholder="Example Text" maxlength="5000" id="field-2" name="field-2" data-name="Field 2" class="cuz-textarea w-input"></textarea><a data-w-id="eae8cf59-748e-4fe9-3bb0-af9c47c45ffe" href="#" class="cuz-tooltip-trigger w-inline-block"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="eae8cf59-748e-4fe9-3bb0-af9c47c46004" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
<div class="cuz-field-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div>
</div>

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Radio Button

Basic

Field Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Radio

Error

Field Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Radio

Some error text.

With Details

Field Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

undefinedLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut com odo diam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare undefined odo diam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi

.cuz-field-container {
margin-top: 10px;
margin-bottom: 20px;
align-items: flex-end;
}

.cuz-field-label {
margin-bottom: 7px;
line-height: 145%;
}.cuz-field-label:small {
font-size: 13px;
}.cuz-field-label:tiny {
font-size: 12px;
}

.cuz-radio-wrapper {
display: flex;
}.cuz-radio-wrapper:tiny {
padding-bottom: 6px;
}

.cuz-radio-field {
display: flex;
padding-top: 8px;
padding-left: 0px;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
color: @swatch_9fdfd7a1;
font-size: 16px;
line-height: 145%;
}.cuz-radio-field:small {
font-size: 14px;
}.cuz-radio-field:tiny {
font-size: 13px;
}

.cuz-radio-button {
width: 18px;
height: 18px;
margin-top: 3px;
margin-right: 10px;
margin-left: 0px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
border-top-width: 1px;
border-top-color: @swatch_b27eec10;
border-right-width: 1px;
border-right-color: @swatch_b27eec10;
border-bottom-width: 1px;
border-bottom-color: @swatch_b27eec10;
border-left-width: 1px;
border-left-color: @swatch_b27eec10;
background-color: @swatch_7f785cdc;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
}.cuz-radio-button:small {
width: 16px;
height: 16px;
margin-right: 5px;
}.cuz-radio-button:tiny {
margin-top: 1px;
}.cuz-radio-button:main_hover {
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
background-color: @swatch_7f785cdc;
}.cuz-radio-button:main_redirected-checked {
border-top-width: 5px;
border-top-color: @swatch_b27eec10;
border-right-width: 5px;
border-right-color: @swatch_b27eec10;
border-bottom-width: 5px;
border-bottom-color: @swatch_b27eec10;
border-left-width: 5px;
border-left-color: @swatch_b27eec10;
background-color: @swatch_7f785cdc;
}

.cuz-radio-button-label {
margin-bottom: 0px;
}

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label</div>
<div class="cuz-radio-wrapper"><label class="cuz-radio-field"><div class="cuz-radio-button"></div><input type="radio" style="opacity:0;position:absolute;z-index:-1"><span class="cuz-radio-button-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></label><a href="#" class="cuz-tooltip-trigger"><img src="info.svg" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
<div class="cuz-field-error-text">Some error text.</div>
</div>

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Checkbox

Basic

Field Label

Checkbox

Error

Field Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

Lorem ipsum

Some error text.

With Details

Field Label

Checkbox

margin-top: 10px;
margin-bottom: 20px;
align-items: flex-end;
}

.cuz-field-label {
margin-bottom: 7px;
line-height: 145%;
}.cuz-field-label:small {
font-size: 13px;
}.cuz-field-label:tiny {
font-size: 12px;
}
.cuz-checkbox-wrapper {
display: flex;
}.cuz-checkbox-wrapper:tiny {
padding-bottom: 6px;
}

.cuz-checkbox-field {
display: flex;
padding-top: 8px;
padding-left: 0px;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
color: @swatch_9fdfd7a1;
font-size: 16px;
line-height: 145%;
}.cuz-checkbox-field:small {
font-size: 14px;
}.cuz-checkbox-field:tiny {
font-size: 13px;
}

.cuz-checkbox {
width: 18px;
height: 18px;
margin-top: 3px;
margin-right: 10px;
margin-left: 0px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
border-top-width: 1px;
border-top-color: @swatch_b27eec10;
border-right-width: 1px;
border-right-color: @swatch_b27eec10;
border-bottom-width: 1px;
border-bottom-color: @swatch_b27eec10;
border-left-width: 1px;
border-left-color: @swatch_b27eec10;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background-color: @swatch_7f785cdc;
background-image: @img_5f1900a23510ee49b1a4e1ed;
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
}.cuz-checkbox:small {
width: 16px;
height: 16px;
margin-right: 5px;
}.cuz-checkbox:tiny {
margin-top: 1px;
}.cuz-checkbox:main_hover {
background-color: @swatch_7f785cdc;
}.cuz-checkbox:main_redirected-checked {
background-color: @swatch_b27eec10;
background-size: contain;
}

.cuz-checkbox-label {
margin-bottom: 0px;
}

<div class="cuz-field-container">
<div class="cuz-field-label">Field Label</div>
<div class="cuz-checkbox-wrapper"><label class="cuz-checkbox-field"><div class="cuz-checkbox"></div><input type="checkbox" style="opacity:0;position:absolute;z-index:-1"><span class="cuz-checkbox-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></label><a href="#" class="cuz-tooltip-trigger"><img src="info.svg" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a></div>
<div class="cuz-field-error-text">Some error text.</div>
</div>

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Field

Basic

With Icon

With Copy Icon

With Note

All Combined

Field - Chips

Basic

With Icon

Pair

Pair With Icon

Input

Basic

Error

With Icon

Phone

With Note

Required Asteriks

All Combined

Input - Inline

Normal

Editing

Saving

Error

Select

Basic

Error

With Icon

With Note

Required Asteriks

All Combined

Grouped

Text Input

Basic

Error

With Icon

With Note

Required

All Combined

Radio Button

Basic

Error

With Details

Checkbox

Basic

Error

With Details