Input

Atom

Metin giriş alanı. Label, hint, error, prefix icon, password toggle ve 3 boyut destekler.

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

Disabled

Preview

Account ID

Code

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

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', iconLeft: '', placeholder: 'Search…' }) %>

Sizes

Preview

Small

Medium

Large

Code

<%- include('modules/ui/Input', { id: 'sm', label: 'Small',  size: 'sm' }) %>
<%- include('modules/ui/Input', { id: 'md', label: 'Medium', size: 'md' }) %>
<%- include('modules/ui/Input', { id: 'lg', label: 'Large',  size: 'lg' }) %>

Source modules/ui/Input.ejs

<%
  var _sz = locals.size || 'md';
  var _dis = locals.disabled ? 'disabled' : '';
  var _id = locals.id || 'input-' + Math.random().toString(36).substr(2, 9);
  var _type = locals.type || 'text';
  
  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';

  var iconPaddingClass = locals.iconLeft ? 'pl-9' : '';
%>

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