Input Text

A single-line text input for freeform string values. Supports label, description, validation states, dense mode (compact), and character limits.

When to use

✓Use diwa-input-text for freeform string data such as names, titles, and generic short text.
✓Use it when no more specific semantic input type applies.
✓Pair state and message to provide clear validation feedback.
✓Use dense mode (compact) only in dense layouts such as toolbars or data tables.

Don't

✕Don't use input-text for emails, URLs, or telephone numbers when dedicated components exist.
✕Don't rely on placeholder text as the only label.
✕Don't hide validation feedback when the field is required or invalid.
✕Don't use dense mode (compact) in primary form layouts where readability matters more than density.

Use diwa-input-text for freeform string data — names, titles, descriptions, and any other general-purpose text. For semantically specialised inputs (email, URL, telephone), prefer the dedicated diwa-input-email, diwa-input-url, or diwa-input-tel variants.

Vanilla JS

<diwa-input-text
  id="name-input"
  label="Full name"
  placeholder="Jane Smith"
  required
></diwa-input-text>

<script>
  const input = document.getElementById('name-input');
  input.addEventListener('change', (e) => {
    console.log('Value:', e.detail);
  });
</script>

React

import { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  const validate = (value: string) => {
    if (!value.trim()) {
      setError('Name is required.');
    } else {
      setError('');
    }
    setName(value);
  };

  return (
    <diwa-input-text
      label="Full name"
      placeholder="Jane Smith"
      value={name}
      state={error ? 'error' : 'none'}
      message={error}
      required
      onchange={(e: CustomEvent<string>) => validate(e.detail)}
    />
  );
}

Validation states

Set state to "error" or "success" and provide a message to surface contextual feedback below the input. When message is present, the optionaldescription is automatically hidden to avoid duplicate help text.

Dense mode (compact)

Set compact to enable dense mode, reducing the input height from 44 px (default touch target) to 32 px. Useful inside toolbars, data tables, or any other space-constrained context.

Character limits

Use maxLength and minLength to set native browser character constraints. These are mapped directly to the underlying <input> element.