Diwa Design System

Input Email

An email address input. Provides native browser email validation, appropriate mobile keyboard, and autocomplete hints.

Properties

NameTypeDefaultDescription
labelstring''Visible label text rendered above the input.
descriptionstring''Helper text shown below the input. Hidden when message is non-empty.
messagestring''State-coloured validation message shown below the input.
state'none' | 'error' | 'success''none'Validation state. Controls border colour and message colour.
namestring''HTML name attribute for form submission.
valuestring''Controlled value (mutable). Reflects to the inner input.
placeholderstring''Placeholder text.
disabledbooleanfalseDisables all interaction.
requiredbooleanfalseMarks field as required. Adds visual asterisk and aria-required="true".
readonlybooleanfalseAllows focus and selection but not editing.
hideLabelbooleanfalseVisually hides the label while keeping it as the accessible name.
compactbooleanfalseEnables dense mode. Reduces input height from 44 px (default touch target) to 32 px.
autoCompletestringundefinedHTML autocomplete attribute passed to the inner input.
theme'dark' | 'light''dark'Per-component theme override. Reflects onto host data-theme.

Events

NameDetail typeBubblesDescription
changestringYesEmitted when the user commits a value (on blur or Enter).
inputstringYesEmitted on every keystroke / value change.
blurFocusEventNoEmitted when the input loses focus.
focusFocusEventNoEmitted when the input gains focus.