Input

Input description.

With UnoCSS

Usage

Basic

Provide a basic input field.

• input-default doesn't provide any styles by default, allowing you to fully customize it.
• input provides some basic styles.

<input type="text" input-default placeholder="input-default..." />
<input type="text" input placeholder="input..." />

Sizes

<input input="~ xs" placeholder="input-xs...">
<input input="~ sm" placeholder="input-sm...">
<input input="~ md" placeholder="input-md...">
<input input="~ lg" placeholder="input-lg...">

Disabled

<input input-default disabled placeholder="input-default with disabled...">
<input input disabled placeholder="input with disabled...">

Colors

<input input="~ red" placeholder="input with disabled...">

Compose

<label input flex="~ items-center gap-2">
  <input type="text" grow placeholder="Search">
  <i inline-block i-carbon-search cursor-pointer />
</label>
<label input="~ dashed" flex="~ items-center gap-2">
  <i text-theme-DEFAULT inline-block i-carbon:email />
  <input type="text" grow placeholder="Email">
</label>

With Vue

TODO