Input

Allows users to input data into a form.

 
<form class="space-y-4 max-w-xs w-full" data-shade="900">
  <div class="field">
      <input type='email' class="input variant-plain sz-md" placeholder="Your email" />
  </div>
  <div class="field">
      <input type='email' class="input variant-bottomOutlined sz-md" placeholder="Your email" />
  </div>
  <div class="field">
      <input type='email' class="input variant-soft sz-md" placeholder="Your email" />
  </div>
  <div class="field">
      <input type='email' class="input variant-outlined sz-md" placeholder="Your email" />
  </div>
  <div class="field">
      <input type='email' class="input variant-mixed sz-md" placeholder="Your email" />
  </div>
</form>

Reference

Input

The input component have the following props

Prop
Type
Usage
size
enum
sz-[size]
variant
enum
variant-[variant]

With label

 
<form class="space-y-4 max-w-xs w-full" data-shade="900">
  <div class="field">
      <label class="text-title" for="email">Email</label>
      <input type='email' id="email" class="input variant-mixed sz-md"/>
  </div>
</form>

With Caption

Input description
 
<form class="space-y-4 max-w-xs w-full" data-shade="900">
  <div class="field">
      <label class="text-title" for="email2">Email</label>
      <input type='email' id="email2" class="input variant-mixed sz-md"/>
      <span class="inline-block text-sm text-caption">Input description</span>
  </div>
</form>

Disabled

Input description
 
<form class="space-y-4 max-w-xs w-full" data-shade="900">
  <div class="field">
      <label class="text-title" for="email3">Email</label>
      <input disabled type='email' id="email3" class="input variant-mixed sz-md"/>
      <span class="inline-block text-sm text-caption">Input description</span>
  </div>
</form>

Size

 
<form class="space-y-4 max-w-xs w-full" data-shade="900">
  <div class="field">
      <input type='email' class="input variant-mixed sz-sm" placeholder="Your email"/>
  </div>
  <div class="field">
      <input type='email' class="input variant-mixed sz-md" placeholder="Your email"/>
  </div>
  <div class="field">
      <input type='email' class="input variant-mixed sz-lg" placeholder="Your email"/>
  </div>
  <div class="field">
      <input type='email' class="input variant-mixed sz-xl" placeholder="Your email"/>
  </div>
</form>