Textarea

Atom

Çok satırlı metin giriş alanı. Label, hint, error ve disabled durumları yerleşiktir.

Default

Preview

Message

Code

<%- include('modules/ui/Textarea', { id: 'msg', label: 'Message', placeholder: 'Enter your message…' }) %>

Required

Preview

Description

Code

<%- include('modules/ui/Textarea', { id: 'desc', label: 'Description', required: true }) %>

With hint

Preview

Bio

Max 500 characters

Code

<%- include('modules/ui/Textarea', { id: 'bio', label: 'Bio', hint: 'Max 500 characters', placeholder: 'Tell us about yourself' }) %>

Error state

Preview

Notes

This field is required

Code

<%- include('modules/ui/Textarea', { id: 'notes', label: 'Notes', error: 'This field is required' }) %>

Disabled

Preview

Read-only notes

Code

<%- include('modules/ui/Textarea', { id: 'ro', label: 'Read-only notes', disabled: true, value: 'This field cannot be edited.' }) %>

Custom rows

Preview

Long-form content

Code

<%- include('modules/ui/Textarea', { id: 'long', label: 'Long-form content', rows: 6 }) %>

Source modules/ui/Textarea.ejs

<%
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';
%>

  
    <%= _label %>
    <% if (_required) { %>
      *
      (required)
    <% } %>
  
  required<% } %>
    <% if (_disabled) { %>disabled<% } %>
    <% if (describedBy) { %>aria-describedby="<%= describedBy %>"<% } %>
    aria-invalid="<%= !!_error %>"
    class="block w-full rounded-md border px-3 py-2 text-sm transition-colors resize-y text-text-primary placeholder:text-text-disabled focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:border-border-focus disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-sunken <%= borderClass %>"
  ><%= _value %>
  <% if (_hint && !_error) { %>
    <%= _hint %>
  <% } %>
  <% if (_error) { %>
    <%= _error %>
  <% } %>