<div class="relative mb-6 inline-flex">
<label for="userSelect" class="hidden">Your select</label>
<div class="relative inline-block max-w-full after:border-2 after:border-r-0 after:border-t-0 after:w-e3 after:h-e3 after:absolute after:top-1/2 after:-mt-e2 after:transform after:-rotate-45 after:right-e4 after:pointer-events-none after:border-red-200 text-base">
<select id="userSelect" class="leading-none transition max-w-full block outline-none focus:outline-none appearance-none shadow-sm border ring-red-400 cursor-pointer ring-opacity-50 focus:ring-2 text-red-700 placeholder-red-700 border-red-200 bg-red-50 h-10 py-2 pl-4 pr-10 text-base rounded">
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<div class="absolute left-0 w-full pr-1 mt-1 text-xs leading-none text-right text-red-500 top-full">
<div>Field is required</div>
</div>
</div>
{% set selectClasses = [classes.base, classes.theme.common] %}
{% set tailClasses = [classes.tail] %}
{# SET THEME STYLES #}
{% if isError%}
{% set selectClasses = (selectClasses.push(classes.theme.error.select), selectClasses) %}
{% set tailClasses = (tailClasses.push(classes.theme.error.tail), tailClasses) %}
{% elif isDisabled %}
{% set selectClasses = (selectClasses.push(classes.theme.disabled.select), selectClasses) %}
{% set tailClasses = (tailClasses.push(classes.theme.disabled.tail), tailClasses) %}
{% else %}
{% set selectClasses = (selectClasses.push(classes.theme.default.select), selectClasses) %}
{% set tailClasses = (tailClasses.push(classes.theme.default.tail), tailClasses) %}
{% endif %}
{# SET SIZE STYLES #}
{% if size =='small' %}
{% set selectClasses = (selectClasses.push(classes.size.small.select), selectClasses) %}
{% set tailClasses = (tailClasses.push(classes.size.small.tail), tailClasses) %}
{% elif size =='large' %}
{% set selectClasses = (selectClasses.push(classes.size.large.select), selectClasses) %}
{% set tailClasses = (tailClasses.push(classes.size.large.tail), tailClasses) %}
{% else %}
{% set selectClasses = (selectClasses.push(classes.size.default.select), selectClasses) %}
{% set tailClasses = (tailClasses.push(classes.size.default.tail), tailClasses) %}
{% endif %}
{% if isBlock %}
{% set selectClasses = (selectClasses.push(classes.block), selectClasses) %}
{% set tailClasses = (tailClasses.push(classes.block), tailClasses) %}
{% endif %}
{# SET RESULT CLASSES #}
{% set selectClassesResult = (selectClasses.join(' ')) %}
{% set tailClassesResult = (tailClasses.join(' ')) %}
<div class="relative mb-6 {% if isError%}inline-flex{% endif %}">
<label for="{{labelName}}" class="hidden">{{itemLabel}}</label>
<div class="{{tailClassesResult}}">
<select id="{{labelName}}" {%if isDisabled%}disabled{%endif%} class="{{selectClassesResult}}">
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<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": false,
"isError": true,
"isBlock": false,
"size": "default",
"type": "text",
"classes": {
"block": "w-full",
"inline": "",
"base": "leading-none transition max-w-full block outline-none focus:outline-none appearance-none",
"tail": "relative inline-block max-w-full after:border-2 after:border-r-0 after:border-t-0 after:w-e3 after:h-e3 after:absolute after:top-1/2 after:-mt-e2 after:transform after:-rotate-45 after:right-e4 after:pointer-events-none",
"size": {
"small": {
"select": "h-7 py-1 pl-3 pr-8 text-xs rounded-sm",
"tail": "text-xs"
},
"default": {
"select": "h-10 py-2 pl-4 pr-10 text-base rounded",
"tail": "text-base"
},
"large": {
"select": "h-12 pl-5 pr-12 py-2 text-xl rounded-md",
"tail": "text-xl"
}
},
"theme": {
"common": "shadow-sm border",
"default": {
"select": "bg-white border-gray-200 hover:border-gray-300 focus:ring-2 ring-blue-400 ring-opacity-50 text-gray-700 placeholder-gray-700 cursor-pointer",
"tail": "after:border-blue-400"
},
"disabled": {
"select": "bg-gray-100 cursor-not-allowed",
"tail": "after:border-gray-200"
},
"error": {
"select": "ring-red-400 cursor-pointer ring-opacity-50 focus:ring-2 text-red-700 placeholder-red-700 border-red-200 bg-red-50",
"tail": "after:border-red-200"
}
}
},
"labelName": "userSelect",
"itemLabel": "Your select",
"placeholder": "Your select"
}
No notes defined.