<div class="relative mb-6">
<label for="userName" class="hidden">Your name</label>
<input id="userName" type="text" placeholder="Your name" readonly class="w-full leading-none transition outline-none focus:outline-none flex items-center shadow-sm border placeholder-opacity-40 bg-gray-100 cursor-not-allowed h-10 px-4 text-base rounded " />
<div class="absolute left-0 w-full pr-1 mt-1 text-xs leading-none text-right text-red-500 top-full">
<div class="hidden">Field is required</div>
</div>
</div>
<div class="relative mb-6">
<label for="{{labelName}}" class="hidden">{{itemLabel}}</label>
<input id="{{labelName}}" type="{{type}}" placeholder="{{placeholder}}" {%if isDisabled%}readonly{%endif%}
class="{{classes.base}} {{classes.theme.common}} {% if isError%} {{classes.theme.error}} {% elif isDisabled %} {{classes.theme.disabled}} {% else %} {{classes.theme.default}} {% endif %} {% if size =='small' %} {{classes.size.small}} {% elif size =='large' %} {{classes.size.large}} {% else %} {{classes.size.default}} {% endif %} " />
<div class="absolute left-0 w-full pr-1 mt-1 text-xs leading-none text-right text-red-500 top-full">
<div {% if isError == false %}class="hidden" {% endif %}>Field is required</div>
</div>
</div>
{
"isDisabled": true,
"isError": false,
"size": "default",
"type": "text",
"classes": {
"base": "w-full leading-none transition outline-none focus:outline-none flex items-center",
"size": {
"small": "h-7 px-3 text-xs rounded-sm",
"default": "h-10 px-4 text-base rounded",
"large": "h-12 px-5 text-xl rounded-md"
},
"theme": {
"common": "shadow-sm border placeholder-opacity-40",
"default": "bg-white border-gray-200 hover:border-gray-300 focus:ring-2 ring-blue-400 ring-opacity-50 text-gray-700 placeholder-gray-700",
"disabled": "bg-gray-100 cursor-not-allowed",
"error": "ring-red-400 ring-opacity-50 focus:ring-2 text-red-700 placeholder-red-700 border-red-200 bg-red-50"
}
},
"labelName": "userName",
"itemLabel": "Your name",
"placeholder": "Your name"
}
No notes defined.