textbox

<!-- Basic Textbox -->
<label for="username">Username</label>
<div
  role="textbox"
  id="username"
  contenteditable="true"
  aria-labelledby="username-label"
></div>

<!-- Note: For most cases, use native <input> instead -->
<label for="username-native">Username</label>
<input type="text" id="username-native" />

<!-- Native HTML Text Inputs (Preferred) -->

<!-- Single-line text input -->
<label for="email">Email Address</label>
<input 
  type="email" 
  id="email"
  placeholder="you@example.com"
  autocomplete="email"
  required
/>

<!-- Multi-line text input -->
<label for="bio">Biography</label>
<textarea 
  id="bio"
  rows="4"
  placeholder="Tell us about yourself..."
></textarea>

<!-- Password input -->
<label for="password">Password</label>
<input 
  type="password" 
  id="password"
  autocomplete="current-password"
/>

<!-- Benefits of native inputs:
     - Built-in keyboard support
     - Form validation
     - Autocomplete support
     - Mobile keyboard optimization
     - Browser autofill -->

<!-- Multi-line Textbox (aria-multiline) -->
<label id="comment-label">Your Comment</label>
<div
  role="textbox"
  aria-labelledby="comment-label"
  aria-multiline="true"
  contenteditable="true"
  class="multiline-textbox"
>
</div>

<!-- Native equivalent (preferred) -->
<label for="comment">Your Comment</label>
<textarea 
  id="comment"
  rows="5"
  cols="40"
></textarea>

<!-- aria-multiline="true" indicates the textbox
     accepts multiple lines of text, like <textarea>.
     Without it, textbox is assumed single-line like <input> -->

<!-- Rich Text Editor -->
<div class="rich-editor">
  <div role="toolbar" aria-label="Text formatting">
    <button aria-label="Bold" aria-pressed="false">B</button>
    <button aria-label="Italic" aria-pressed="false">I</button>
    <button aria-label="Underline" aria-pressed="false">U</button>
  </div>
  
  <div
    role="textbox"
    aria-label="Rich text editor"
    aria-multiline="true"
    aria-describedby="editor-instructions"
    contenteditable="true"
    class="editor-content"
  >
    <!-- Rich text content here -->
  </div>
  
  <div id="editor-instructions" class="sr-only">
    Use toolbar buttons to format text. 
    Press Tab to exit the editor.
  </div>
</div>

<!-- Note: Rich text editors require significant 
     additional accessibility implementation -->

<!-- Textbox with Validation -->
<div class="form-field">
  <label for="email" id="email-label">
    Email <span aria-hidden="true">*</span>
  </label>
  
  <input
    type="email"
    id="email"
    aria-labelledby="email-label"
    aria-required="true"
    aria-invalid="true"
    aria-describedby="email-error email-hint"
    value="invalid-email"
  />
  
  <span id="email-hint" class="hint">
    Enter a valid email address
  </span>
  
  <span id="email-error" class="error" role="alert">
    Please enter a valid email address
  </span>
</div>

<script>
  const emailInput = document.getElementById('email');
  const errorSpan = document.getElementById('email-error');
  
  emailInput.addEventListener('blur', () => {
    const isValid = emailInput.validity.valid;
    emailInput.setAttribute('aria-invalid', !isValid);
    errorSpan.hidden = isValid;
  });
</script>

<style>
  [aria-invalid="true"] {
    border-color: #dc2626;
  }
  
  .error {
    color: #dc2626;
    font-size: 0.875rem;
  }
</style>

// React Textbox Component
import { useState, useRef, useId } from 'react';

interface TextboxProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  multiline?: boolean;
  rows?: number;
  placeholder?: string;
  required?: boolean;
  error?: string;
  hint?: string;
  maxLength?: number;
}

function Textbox({
  label,
  value,
  onChange,
  multiline = false,
  rows = 4,
  placeholder,
  required = false,
  error,
  hint,
  maxLength,
}: TextboxProps) {
  const inputId = useId();
  const hintId = useId();
  const errorId = useId();

  const describedBy = [
    hint && hintId,
    error && errorId,
  ].filter(Boolean).join(' ') || undefined;

  const inputProps = {
    id: inputId,
    value,
    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => 
      onChange(e.target.value),
    placeholder,
    'aria-required': required || undefined,
    'aria-invalid': !!error || undefined,
    'aria-describedby': describedBy,
    maxLength,
    className: `textbox ${error ? 'error' : ''}`,
  };

  return (
    <div className="textbox-wrapper">
      <label htmlFor={inputId}>
        {label}
        {required && <span aria-hidden="true"> *</span>}
      </label>

      {multiline ? (
        <textarea {...inputProps} rows={rows} />
      ) : (
        <input type="text" {...inputProps} />
      )}

      {hint && !error && (
        <span id={hintId} className="hint">
          {hint}
        </span>
      )}

      {error && (
        <span id={errorId} className="error-message" role="alert">
          {error}
        </span>
      )}

      {maxLength && (
        <span className="char-count" aria-live="polite">
          {value.length}/{maxLength}
        </span>
      )}
    </div>
  );
}

// Usage
function Form() {
  const [name, setName] = useState('');
  const [bio, setBio] = useState('');
  const [email, setEmail] = useState('');

  return (
    <form>
      <Textbox
        label="Full Name"
        value={name}
        onChange={setName}
        required
        hint="Enter your legal name"
      />

      <Textbox
        label="Biography"
        value={bio}
        onChange={setBio}
        multiline
        rows={5}
        maxLength={500}
        placeholder="Tell us about yourself..."
      />

      <Textbox
        label="Email"
        value={email}
        onChange={setEmail}
        required
        error={email && !email.includes('@') ? 'Invalid email' : ''}
      />
    </form>
  );
}

<!-- Textbox with Autocomplete -->
<div class="autocomplete-container">
  <label for="city-input" id="city-label">City</label>
  
  <input
    type="text"
    id="city-input"
    role="combobox"
    aria-labelledby="city-label"
    aria-autocomplete="list"
    aria-controls="city-listbox"
    aria-expanded="true"
    aria-activedescendant="city-option-2"
    autocomplete="off"
  />
  
  <ul 
    id="city-listbox"
    role="listbox"
    aria-label="City suggestions"
  >
    <li role="option" id="city-option-1" aria-selected="false">
      New York
    </li>
    <li role="option" id="city-option-2" aria-selected="true">
      Los Angeles
    </li>
    <li role="option" id="city-option-3" aria-selected="false">
      Chicago
    </li>
  </ul>
</div>

<!-- Note: When adding autocomplete to a textbox,
     use role="combobox" instead of role="textbox"
     for proper semantics -->