Form Input Editable

without Value

<span class="form-input-editable " data-activator="#activateEmpty" data-confirm="#confirmEmpty" data-cancel="#cancelEmpty" data-placeholder="placeholder" data-input-class="form-control" data-has-ajax="false" data-ajax-url="" data-ajax-method=""> <span class="form-input-editable-value text-grey-light font-italic form-input-editable--is-empty "></span> <span class="form-input-editable-error"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#warning"></use> </svg> </span> <span class="form-input-editable-loader"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#loader"></use> </svg> </span> <a id="activateEmpty" class="btn iconButton iconButton--type-d edit editable-button shown"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a> <a id="confirmEmpty" class="btn iconButton iconButton--type-d confirm editable-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> <span class="title"> <!-- --> </span> </a> <a id="cancelEmpty" class="btn iconButton iconButton--type-d cancel editable-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#exit"></use> </svg> <span class="title"> <!-- --> </span> </a> </span>

with Error

KR-LC1000T
<span class="form-input-editable has-error" data-activator="#activatorError" data-confirm="#confirmError" data-cancel="#cancelError" data-placeholder="placeholder" data-input-class="form-control" data-has-ajax="true" data-ajax-url="https://reqres.in/api/register" data-ajax-method="POST"> <span class="form-input-editable-value ">KR-LC1000T</span> <span class="form-input-editable-error"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#warning"></use> </svg> </span> <span class="form-input-editable-loader"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#loader"></use> </svg> </span> <a id="activatorError" class="btn iconButton iconButton--type-d edit editable-button shown"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a> <a id="confirmError" class="btn iconButton iconButton--type-d confirm editable-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> <span class="title"> <!-- --> </span> </a> <a id="cancelError" class="btn iconButton iconButton--type-d cancel editable-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#exit"></use> </svg> <span class="title"> <!-- --> </span> </a> </span>

Size Large

KR-LC1000T

<h2> <span class="form-input-editable form-input-editable-lg" data-activator="#large" data-confirm="#large-confirm" data-cancel="#large-cancel" data-placeholder="placeholder" data-input-class="form-control" data-has-ajax="false" data-ajax-url="" data-ajax-method="" > <span class="form-input-editable-value " >KR-LC1000T</span> <span class="form-input-editable-error"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#warning"></use> </svg> </span> <span class="form-input-editable-loader"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#loader"></use> </svg> </span> <a id="large" class="btn iconButton iconButton--type-d edit editable-button shown" > <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a> <a id="large-confirm" class="btn iconButton iconButton--type-d confirm editable-button" > <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> <span class="title"> <!-- --> </span> </a> <a id="large-cancel" class="btn iconButton iconButton--type-d cancel editable-button" > <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#exit"></use> </svg> <span class="title"> <!-- --> </span> </a> </span> </h2>

Loading State

Formular ausfüllen und bestätigen, um Ladeanimation zu sehen.

KR-LC1000T
<span class="form-input-editable " data-activator="#activatorLoading" data-confirm="#confirmLoading" data-cancel="#cancelLoading" data-placeholder="placeholder" data-input-class="form-control" data-has-ajax="true" data-ajax-url="https://reqres.in/api/users?delay&#x3D;6" data-ajax-method="GET"> <span class="form-input-editable-value ">KR-LC1000T</span> <span class="form-input-editable-error"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#warning"></use> </svg> </span> <span class="form-input-editable-loader"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#loader"></use> </svg> </span> <a id="activatorLoading" class="btn iconButton iconButton--type-d edit editable-button shown"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a> <a id="confirmLoading" class="btn iconButton iconButton--type-d confirm editable-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> <span class="title"> <!-- --> </span> </a> <a id="cancelLoading" class="btn iconButton iconButton--type-d cancel editable-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#exit"></use> </svg> <span class="title"> <!-- --> </span> </a> </span>

with Value

KR-LC1000T
<span class="form-input-editable " data-activator="#KR-LC1000T" data-confirm="#confirm1" data-cancel="#cancel1" data-placeholder="placeholder" data-input-class="form-control" data-has-ajax="false" data-ajax-url="" data-ajax-method=""> <span class="form-input-editable-value ">KR-LC1000T</span> <span class="form-input-editable-error"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#warning"></use> </svg> </span> <span class="form-input-editable-loader"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#loader"></use> </svg> </span> <a id="KR-LC1000T" class="btn iconButton iconButton--type-d edit editable-button shown"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a> <a id="confirm1" class="btn iconButton iconButton--type-d confirm editable-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> <span class="title"> <!-- --> </span> </a> <a id="cancel1" class="btn iconButton iconButton--type-d cancel editable-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#exit"></use> </svg> <span class="title"> <!-- --> </span> </a> </span>