ورودی

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

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

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

<div class="k-field">
  <label class="k-label" for=":r2R0:">ایمیل</label>
  <div class="k-input">
    <input id=":r2R0:" class="k-input__control" aria-invalid="true" aria-describedby=":r2R0:-error" type="email" value="sara@example"/>
  </div>
  <p class="k-hint k-hint--error" id=":r2R0:-error">آدرس ایمیل معتبر نیست.</p>
</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">
  <label class="k-label" for=":r5R1:">ایمیل</label>
  <div class="k-input"><span class="k-input__addon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.5" y="4.5" width="15" height="11" rx="2"></rect><path d="m3 5.5 7 5 7-5"></path></svg></span>
    <input id=":r5R1:" class="k-input__control" type="email" placeholder="you@example.com"/>
  </div>
</div>
<div class="k-field">
  <label class="k-label" for=":r5R2:">مبلغ</label>
  <div class="k-input">
    <input id=":r5R2:" class="k-input__control" inputMode="numeric" placeholder="۰"/><span class="k-input__addon">تومان</span>
  </div>
</div>
<div class="k-field">
  <div class="k-input k-input--sm"><span class="k-input__addon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="9" r="5.5"></circle><path d="m13.5 13.5 3 3"></path></svg></span>
    <input id=":r5R3:" class="k-input__control" aria-label="جستجو" placeholder="جستجو…"/>
  </div>
</div>

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

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

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

<div class="k-field">
  <label class="k-label" for=":r4R0:">کد ملی</label>
  <div class="k-input">
    <input id=":r4R0:" class="k-input__control" disabled="" value="۰۰۱۲۳۴۵۶۷۸"/>
  </div>
</div>