Textarea
AtomÇok satırlı metin giriş alanı. Label, hint, error ve disabled durumları yerleşiktir.
<%- include('modules/ui/Textarea', { id: 'msg', label: 'Message', placeholder: 'Enter your message…' }) %>
<%- include('modules/ui/Textarea', { id: 'desc', label: 'Description', required: true }) %>
Max 500 characters
<%- include('modules/ui/Textarea', { id: 'bio', label: 'Bio', hint: 'Max 500 characters', placeholder: 'Tell us about yourself' }) %>
This field is required
<%- include('modules/ui/Textarea', { id: 'notes', label: 'Notes', error: 'This field is required' }) %>
<%- include('modules/ui/Textarea', { id: 'ro', label: 'Read-only notes', disabled: true, value: 'This field cannot be edited.' }) %>
<%- include('modules/ui/Textarea', { id: 'long', label: 'Long-form content', rows: 6 }) %>
<%
var _id = locals.id || 'textarea';
var _label = locals.label || '';
var _value = locals.value !== undefined ? locals.value : '';
var _placeholder = locals.placeholder || '';
var _rows = locals.rows || 4;
var _hint = locals.hint || null;
var _error = locals.error || null;
var _required = locals.required || false;
var _disabled = locals.disabled || false;
var hintId = _hint ? _id + '-hint' : null;
var errorId = _error ? _id + '-error' : null;
var describedBy = [hintId, errorId].filter(Boolean).join(' ') || null;
var borderClass = _error ? 'border-error ring-1 ring-error bg-error-subtle' : 'border-border bg-surface-base';
%>
<% if (_hint && !_error) { %>
<%= _hint %>
<% } %>
<% if (_error) { %>
<%= _error %>
<% } %>