Components

DhTextInput

Outlined text field with label, helper / error, and inline start/end icons. All HTML validation attributes pass through.

Open in Figma

Sizes

<DhTextInput bind:value={name} size="sm" label="Small" />
<DhTextInput bind:value={name} size="md" label="Medium (default)" />
<DhTextInput bind:value={name} size="lg" label="Large" />

Helper vs error message

We'll never share this address.

<DhTextInput
  bind:value={email}
  type="email"
  label="Email"
  startIcon="mail"
  helperText="We'll never share this address."
  errorText={emailError}
  required
/>

With icons

<DhTextInput type="search"   label="Search" startIcon="search" />
<DhTextInput type="password" label="Password" startIcon="lock" endIcon="eye" required />

Native types

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

States

<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 />
<DhTextInput value="invalid" label="Error" errorText="This value is not allowed." />

In a form

Submissions: 0

<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>