ورودی

<Input label="نام و نام خانوادگی" placeholder="مثلاً سارا احمدی" hint="همان‌طور که در کارت ملی آمده است." required />

<div class="k-field">
  <div class="k-field__label-row">
    <label class="k-label" for=":r3R0:">نام و نام خانوادگی<span class="k-label__required" aria-hidden="true">*</span></label>
  </div>
  <div class="k-input" data-size="md">
    <input id=":r3R0:" class="k-input__control" type="text" required="" aria-describedby=":r3R0:-hint" placeholder="مثلاً سارا احمدی"/>
  </div>
  <div class="k-field__hint-row">
    <div class="k-field__hints">
      <p class="k-hint" id=":r3R0:-hint">همان‌طور که در کارت ملی آمده است.</p>
    </div>
  </div>
</div>

<Input label="ایمیل" type="email" defaultValue="sara@example" error="آدرس ایمیل معتبر نیست." />

<div class="k-field" data-invalid="">
  <div class="k-field__label-row">
    <label class="k-label" for=":r4R0:">ایمیل</label>
  </div>
  <div class="k-input" data-size="md" data-state="invalid">
    <input id=":r4R0:" class="k-input__control" type="email" aria-invalid="true" aria-describedby=":r4R0:-error" value="sara@example"/>
  </div>
  <div class="k-field__hint-row">
    <div class="k-field__hints">
      <p class="k-hint k-hint--error" id=":r4R0:-error">آدرس ایمیل معتبر نیست.</p>
    </div>
  </div>
</div>

<Input label="ایمیل" type="email" placeholder="you@example.com" addonStart={<MailIcon />} />
<Input label="مبلغ" inputMode="numeric" placeholder="۰" addonEnd="تومان" />
<Input aria-label="جستجو" placeholder="جستجو…" addonStart={<SearchIcon />} size="sm" />

<div class="k-field">
  <div class="k-field__label-row">
    <label class="k-label" for=":r8R1:">ایمیل</label>
  </div>
  <div class="k-input" data-size="md"><span class="k-input__addon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-kashi-icon="mail"><path d="M6.5 3.75H13.5C16.7 3.75 17.5 4.55 17.5 7.75V12.25C17.5 15.45 16.7 16.25 13.5 16.25H6.5C3.3 16.25 2.5 15.45 2.5 12.25V7.75C2.5 4.55 3.3 3.75 6.5 3.75Z"/><path d="m14.1 7.6-2.9 2.35a2 2 0 0 1-2.45 0L5.85 7.6"/></svg></span>
    <input id=":r8R1:" class="k-input__control" type="email" placeholder="you@example.com"/>
  </div>
</div>
<div class="k-field">
  <div class="k-field__label-row">
    <label class="k-label" for=":r8R2:">مبلغ</label>
  </div>
  <div class="k-input" data-size="md">
    <input id=":r8R2:" class="k-input__control" type="text" inputMode="numeric" placeholder="۰"/><span class="k-input__addon">تومان</span>
  </div>
</div>
<div class="k-field">
  <div class="k-input k-input--sm" data-size="sm"><span class="k-input__addon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-kashi-icon="search"><circle cx="9.1" cy="9.1" r="6.2"/><path d="m14.9 14.9 2.3 2.3"/></svg></span>
    <input id=":r8R3:" class="k-input__control" type="text" aria-label="جستجو" placeholder="جستجو…"/>
  </div>
</div>

<Textarea label="توضیحات" placeholder="چند خط بنویسید…" hint="حداکثر ۵۰۰ نویسه." />

<div class="k-field">
  <div class="k-field__label-row">
    <label class="k-label" for=":r5R0:">توضیحات</label>
  </div>
  <div class="k-input k-input--textarea">
    <textarea id=":r5R0:" class="k-input__control" rows="4" aria-describedby=":r5R0:-hint" placeholder="چند خط بنویسید…"></textarea>
  </div>
  <div class="k-field__hint-row">
    <div class="k-field__hints">
      <p class="k-hint" id=":r5R0:-hint">حداکثر ۵۰۰ نویسه.</p>
    </div>
  </div>
</div>

<Input label="کد ملی" defaultValue="۰۰۱۲۳۴۵۶۷۸" disabled />

<div class="k-field">
  <div class="k-field__label-row">
    <label class="k-label" for=":r6R0:">کد ملی</label>
  </div>
  <div class="k-input" data-size="md" data-state="disabled">
    <input id=":r6R0:" class="k-input__control" type="text" disabled="" value="۰۰۱۲۳۴۵۶۷۸"/>
  </div>
</div>

<Input label="رمز عبور" type="password" labelEnd={<a href="/forgot">فراموشی رمز؟</a>} />
<Input aria-label="جستجو" addonStart={<SearchIcon />} clearable />
<Input label="نام کاربری" loading hint="در حال بررسی…" />
<Input label="نام شرکت" optional />
<Textarea label="دربارهٔ شما" autoResize showCount maxLength={280} />