Input Text
A single-line text input for freeform string values. Supports label, description, validation states, dense mode (compact), and character limits.
Default
Basic text input with a label and placeholder.
<diwa-input-text label="Full name" placeholder="Jane Smith"></diwa-input-text>Required
Set required to append a red asterisk and set aria-required.
<diwa-input-text label="Full name" placeholder="Jane Smith" required></diwa-input-text>Validation states
Error and success states colour the border and message text.
<diwa-input-text label="Full name" value="J" state="error" message="Please enter your full name."></diwa-input-text><diwa-input-text label="Username" value="jane.smith" state="success" message="Username is available."></diwa-input-text>Compact
Enables dense mode by reducing height from 44 px (default touch target) to 32 px.
<diwa-input-text label="Search" placeholder="Filter…" compact></diwa-input-text>Disabled & read-only
Disabled blocks all interaction; read-only allows selection but not editing.
<diwa-input-text label="Full name" value="Jane Smith" disabled></diwa-input-text><diwa-input-text label="Full name" value="Jane Smith" readonly></diwa-input-text>Slots
Use start and end to embed content inside the input border (prefix / suffix), and label-after to place contextual icons or links after the label.
<diwa-input-text label="Amount" placeholder="0.00">
<span slot="start">$</span>
<span slot="end">USD</span>
<diwa-icon slot="label-after" name="info" size="16"></diwa-icon>
</diwa-input-text>