DhTextInput

Material 3 outlined field: the label floats onto the border on focus or once filled. isError / isSuccess paint the border and add a trailing status icon; type="password" gets a built-in show/hide toggle. All HTML validation attributes pass through.

Open in Figma

Floating label     Full name 
  Email 
 <DhTextInput bind:value={name} label="Full name" />
<DhTextInput bind:value={email} type="email" label="Email" startIcon="mail" />

Validation states

We'll never share this address.

Username

Available

<DhTextInput
  bind:value={email}
  type="email"
  label="Email"
  isError={Boolean(emailError)}
  supportingText={emailError || "We'll never share this address."}
/>
<DhTextInput
  bind:value={username}
  label="Username"
  isSuccess={usernameOk}
  supportingText={usernameOk ? 'Available' : 'At least 3 characters'}
/>

Password     Password* 
 <DhTextInput bind:value={password} type="password" label="Password" required />

Numeric keyboard

inputmode hints the on-screen keyboard without changing the input type — the fit for PIN and OTP fields, where type=number would break leading zeros. For codes sent by SMS, autocomplete=one-time-code lets the platform offer the received code as autofill.

SMS code

<DhTextInput
  bind:value={pin}
  label="PIN"
  inputmode="numeric"
  pattern="[0-9]*"
  maxlength={6}
/>
<DhTextInput
  bind:value={smsCode}
  label="SMS code"
  inputmode="numeric"
  autocomplete="one-time-code"
  maxlength={6}
/>

Native types     Amount 
  Meeting time 
 <DhTextInput type="number" label="Amount" min={0} max={1000} step={0.5} startIcon="plus" />
<DhTextInput type="datetime-local" label="Meeting time" />

States     Empty 
  Filled 
  Readonly 
  Disabled 
 <DhTextInput label="Empty" placeholder="Type something" />
<DhTextInput value="Some value" label="Filled" />
<DhTextInput value="Cannot change" label="Readonly" readonly />
<DhTextInput label="Disabled" placeholder="Not interactive" disabled />

In a form

<form onsubmit={submit}>
  <DhTextInput label="First name" required />
  <DhTextInput label="Last name" required />
  <DhTextInput label="Work email" type="email" required />
  <DhButton type="submit" variant="primary" text="Submit" />
</form>