73 lines
3.4 KiB
Twig
73 lines
3.4 KiB
Twig
{# 🌈✨ Super Amazing Form Components 🎨🎉 #}
|
|
|
|
{# 📝 Input Field 📝 #}
|
|
{% macro input(name, label, value, type = 'text', required = false, placeholder = '', class = '') %}
|
|
<div class="form-group">
|
|
<label for="{{ name }}">✨ {{ label }} ✨{% if required %} <span class="required">⭐ REQUIRED ⭐</span>{% endif %}</label>
|
|
<input type="{{ type }}" id="{{ name }}" name="{{ name }}" value="{{ value|default('') }}"
|
|
{% if required %}required{% endif %}
|
|
{% if placeholder %}placeholder="{{ placeholder }} 💫"{% endif %}
|
|
class="form-control {{ class }}">
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{# 📄 Textarea Field 📄 #}
|
|
{% macro textarea(name, label, value, required = false, rows = 3, placeholder = '', class = '') %}
|
|
<div class="form-group">
|
|
<label for="{{ name }}">📝 {{ label }} 📝{% if required %} <span class="required">⭐ MUST FILL ⭐</span>{% endif %}</label>
|
|
<textarea id="{{ name }}" name="{{ name }}" rows="{{ rows }}"
|
|
{% if required %}required{% endif %}
|
|
{% if placeholder %}placeholder="{{ placeholder }} ✏️"{% endif %}
|
|
class="form-control {{ class }}">{{ value|default('') }}</textarea>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{# 📋 Select Field 📋 #}
|
|
{% macro select(name, label, options, selected, required = false, class = '') %}
|
|
<div class="form-group">
|
|
<label for="{{ name }}">🔽 {{ label }} 🔽{% if required %} <span class="required">⭐ PICK ONE ⭐</span>{% endif %}</label>
|
|
<select id="{{ name }}" name="{{ name }}" class="form-control {{ class }}" {% if required %}required{% endif %}>
|
|
<option value="">-- 🔍 Select {{ label }} 🔎 --</option>
|
|
{% for value, text in options %}
|
|
<option value="{{ value }}" {% if selected == value %}selected{% endif %}>✅ {{ text }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{# ✅ Checkbox Field ✅ #}
|
|
{% macro checkbox(name, label, checked = false, value = '1', class = '') %}
|
|
<div class="form-check">
|
|
<input type="checkbox" id="{{ name }}" name="{{ name }}" value="{{ value }}"
|
|
{% if checked %}checked{% endif %} class="form-check-input {{ class }}">
|
|
<label class="form-check-label" for="{{ name }}">✅ {{ label }} ✅</label>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{# 🔘 Radio Button 🔘 #}
|
|
{% macro radio(name, label, value, checked = false, class = '') %}
|
|
<div class="form-check">
|
|
<input type="radio" id="{{ name }}_{{ value }}" name="{{ name }}" value="{{ value }}"
|
|
{% if checked %}checked{% endif %} class="form-check-input {{ class }}">
|
|
<label class="form-check-label" for="{{ name }}_{{ value }}">🔘 {{ label }} 🔘</label>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{# 🚀 Submit Button 🚀 #}
|
|
{% macro submit(label = 'Submit', class = 'btn-primary') %}
|
|
<button type="submit" class="btn {{ class }}">🚀 {{ label }} 🚀</button>
|
|
{% endmacro %}
|
|
|
|
{# 🔳 Button 🔳 #}
|
|
{% macro button(label, type = 'button', class = 'btn-secondary', attributes = '') %}
|
|
<button type="{{ type }}" class="btn {{ class }}" {{ attributes|raw }}>🔳 {{ label }} 🔳</button>
|
|
{% endmacro %}
|
|
|
|
{# ⚠️ Form Error Display ⚠️ #}
|
|
{% macro errors(error) %}
|
|
{% if error %}
|
|
<div class="alert alert-danger">
|
|
⚠️😱 ERROR ALERT! 😱⚠️ {{ error }} 💥💔
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|