Textarea

Atom

Çok satırlı metin giriş alanı. Label, hint, error ve disabled durumları; resize kontrolü destekler.

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.' }) %>

Resize none

Preview

Fixed height

Code

<%- include('modules/ui/Textarea', { id: 'fixed', label: 'Fixed height', resize: 'none', rows: 4 }) %>

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 _sz  = locals.size     || 'md';
  var _dis = locals.disabled ? 'disabled' : '';
  var _id  = locals.id || 'textarea-' + Math.random().toString(36).substr(2, 9);
  var _rows = locals.rows || 4;

  var sc = {
    sm: 'px-2.5 py-1.5 text-sm',
    md: 'px-3 py-2 text-sm',
    lg: 'px-4 py-3 text-base',
  }[_sz] || 'px-3 py-2 text-sm';

  var baseInputClass = 'block w-full rounded-md border bg-surface-base text-text-primary placeholder:text-text-disabled focus:outline-none focus:ring-2 focus:ring-border-focus disabled:opacity-50 disabled:cursor-not-allowed transition-colors';

  var stateClass = locals.error
    ? 'border-error ring-1 ring-error bg-error-subtle'
    : 'border-border hover:border-border-strong';
%>

  <% if (locals.label) { %>
    
      <%= locals.label %> <% if (locals.required) { %>*<% } %>
    
  <% } %>
  placeholder="<%= locals.placeholder %>"<% } %>
    <% if (locals.name) { %>name="<%= locals.name %>"<% } %>
    <%= _dis %>
    <% if (locals.required) { %>required<% } %>
  ><% if (locals.value) { %><%= locals.value %><% } %>
  <% if (locals.hint || locals.error) { %>
    
      <%= locals.error || locals.hint %>
    
  <% } %>