Input

Atom

Metin giriş alanı. Label, hint, error, success, prefix/suffix icon ve password toggle desteği.

Default

Preview

Email address

Code

<%- include('modules/ui/Input', { id: 'email', label: 'Email address', placeholder: 'you@example.com' }) %>

Required

Preview

Full name

Code

<%- include('modules/ui/Input', { id: 'name', label: 'Full name', required: true, placeholder: 'Jane Doe' }) %>

With hint

Preview

Username

Letters, numbers and underscores only

Code

<%- include('modules/ui/Input', { id: 'user', label: 'Username', hint: 'Letters, numbers and underscores only' }) %>

Error state

Preview

Email address

Enter a valid email address

Code

<%- include('modules/ui/Input', { id: 'email', label: 'Email address', error: 'Enter a valid email address' }) %>

Success state

Preview

Username

Username is available

Code

<%- include('modules/ui/Input', { id: 'user', label: 'Username', success: 'Username is available' }) %>

Disabled

Preview

Account ID

Code

<%- include('modules/ui/Input', { id: 'acc', label: 'Account ID', disabled: true }) %>

Read-only

Preview

API key (read-only)

Code

<%- include('modules/ui/Input', { id: 'key', label: 'API key', readOnly: true, value: 'sk-••••••••••••••••' }) %>

Password

Preview

Password

Code

<%- include('modules/ui/Input', { id: 'pw', label: 'Password', type: 'password', placeholder: '••••••••' }) %>

Prefix icon

Preview

Code

<%- include('modules/ui/Input', { id: 'search', label: 'Search', prefixIcon: 'fa-solid fa-magnifying-glass', placeholder: 'Search…' }) %>

Source modules/ui/Input.ejs

<%
var _id       = locals.id       || 'input';
var _label    = locals.label    || '';
var _type     = locals.type     || 'text';
var _value    = locals.value    !== undefined ? locals.value : '';
var _placeholder = locals.placeholder || '';
var _hint     = locals.hint     || null;
var _error    = locals.error    || null;
var _success  = locals.success  || null;
var _required = locals.required || false;
var _disabled = locals.disabled || false;
var _readOnly = locals.readOnly || false;
var _prefixIcon = locals.prefixIcon || null;
var _suffixIcon = locals.suffixIcon || null;

var hintId    = (_hint && !_error && !_success) ? _id + '-hint'    : null;
var errorId   = _error   ? _id + '-error'   : null;
var successId = (_success && !_error) ? _id + '-success' : null;
var describedBy = [hintId, errorId, successId].filter(Boolean).join(' ') || null;

var borderClass = _error   ? 'border-error ring-1 ring-error bg-error-subtle'
                : _success ? 'border-success ring-1 ring-success bg-success-subtle'
                :            'border-border bg-surface-base';

var plClass = _prefixIcon ? ' pl-9' : '';
var prClass = (_suffixIcon || _type === 'password') ? ' pr-9' : '';
%>

  
    <%= _label %>
    <% if (_required) { %>
      *
      (required)
    <% } %>
    <% if (_readOnly) { %>
      (read-only)
    <% } %>
  

  
    <% if (_prefixIcon) { %>
      
        
      
    <% } %>

    required<% } %>
      <% if (_disabled) { %>disabled<% } %>
      <% if (_readOnly) { %>readonly<% } %>
      <% if (describedBy) { %>aria-describedby="<%= describedBy %>"<% } %>
      aria-invalid="<%= !!_error %>"
      class="block w-full rounded-md border px-3 py-2 text-sm transition-colors text-text-primary placeholder:text-text-disabled focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-sunken read-only:bg-surface-sunken read-only:cursor-default <%= borderClass %><%= plClass %><%= prClass %>"
    />

    <% if (_suffixIcon && _type !== 'password') { %>
      
        
      
    <% } %>

    <% if (_type === 'password') { %>
      
    <% } %>
  

  <% if (hintId) { %>
    <%= _hint %>
  <% } %>
  <% if (_error) { %>
    <%= _error %>
  <% } %>
  <% if (successId) { %>
    <%= _success %>
  <% } %>