Text Input

Text Input er et enkelt inputfelt.

⌘ K Path Optional

<input type="text" placeholder="Type here" class="input" />
<label class="input">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2.5"
      fill="none"
      stroke="currentColor"
    >
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.3-4.3"></path>
</g>
</svg>
<input type="search" class="grow" placeholder="Search" />
<kbd class="kbd kbd-sm">⌘</kbd>
<kbd class="kbd kbd-sm">K</kbd>
</label>
<label class="input">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2.5"
      fill="none"
      stroke="currentColor"
    >
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
</g>
</svg>
<input type="text" class="grow" placeholder="index.php" />
</label>
<label class="input">
Path
<input type="text" class="grow" placeholder="src/app/" />
<span class="badge badge-neutral badge-xs">Optional</span>
</label>
<input type="text" placeholder="You can't touch this" class="input" disabled />

Ghost

<input type="text" placeholder="Type here" class="input input-ghost" />

Fieldset + legend

What is your name?

Optional

<fieldset class="fieldset">
  <legend class="fieldset-legend">What is your name?</legend>
  <input type="text" class="input" placeholder="Type here" />
  <p class="label">Optional</p>
</fieldset>

<input type="text" placeholder="neutral" class="input input-neutral" />
<input type="text" placeholder="Primary" class="input input-primary" />
<input type="text" placeholder="Secondary" class="input input-secondary" />
<input type="text" placeholder="Accent" class="input input-accent" />
<input type="text" placeholder="Info" class="input input-info" />
<input type="text" placeholder="Success" class="input input-success" />
<input type="text" placeholder="Warning" class="input input-warning" />
<input type="text" placeholder="Error" class="input input-error" />

Datetime

<input type="datetime-local" class="input" />

Validering

Must be 3 to 30 characters
containing only letters, numbers or dash

<label class="input validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2.5"
      fill="none"
      stroke="currentColor"
    >
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</g>
</svg>
<input
    type="text"
    required
    placeholder="Username"
    pattern="[A-Za-z][A-Za-z0-9\-]*"
    minlength="3"
    maxlength="30"
    title="Only letters, numbers or dash"
  />
</label>

<p class="validator-hint">
  Must be 3 to 30 characters
  <br />containing only letters, numbers or dash
</p>

Søk

<label class="input">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2.5"
      fill="none"
      stroke="currentColor"
    >
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.3-4.3"></path>
</g>
</svg>
<input type="search" required placeholder="Search" />
</label>

Epost

<label class="input validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2.5"
      fill="none"
      stroke="currentColor"
    >
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
</g>
</svg>
<input type="email" placeholder="mail@site.com" required />
</label>

<div class="validator-hint hidden">Enter valid email address</div>

Passord

<label class="input validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2.5"
      fill="none"
      stroke="currentColor"
    >
<path
        d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
      ></path>
<circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle>
</g>
</svg>
<input
    type="password"
    required
    placeholder="Password"
    minlength="8"
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
    title="Must be more than 8 characters, including number, lowercase letter, uppercase letter"
  />
</label>

<p class="validator-hint hidden">
  Must be more than 8 characters, including
  <br />At least one number <br />At least one lowercase letter <br />At least one uppercase letter
</p>

URL

Must be valid URL

<label class="input validator">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2.5"
      fill="none"
      stroke="currentColor"
    >
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</g>
</svg>
<input
    type="url"
    required
    placeholder="https://"
    value="https://"
    pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9\-].*[a-zA-Z0-9])?\.)+[a-zA-Z].*$"
    title="Must be valid URL"
  />
</label>

<p class="validator-hint">Must be valid URL</p>

Forige Tabs

Neste Textarea