فرم و ورودی‌ها

<div ui="grid" style="--bana-grid-min:16rem">
  <label ui="field"><span>نام کامل</span><input name="name" required autocomplete="name"><small>نام و نام خانوادگی را وارد کنید.</small></label>
  <label ui="field"><span>ایمیل</span><input name="email" type="email" aria-invalid="true" aria-describedby="e1" value="ali@"><small id="e1" ui="error">نشانی ایمیل معتبر نیست.</small></label>
  <label ui="field"><span>کد ملی (فقط‌خواندنی)</span><input readonly value="0012345678"></label>
  <label ui="field"><span>غیرفعال</span><input disabled value="غیرقابل ویرایش"></label>
</div>

<div ui="grid" style="--bana-grid-min:16rem">
  <label ui="field"><span>جست‌وجو</span><div ui="input-group"><bana-icon name="search"></bana-icon><input type="search" placeholder="نام محصول…"></div></label>
  <label ui="field"><span>قیمت</span><div ui="input-group"><input type="number" inputmode="numeric" value="1200000"><span>تومان</span></div></label>
  <label ui="field"><span>وب‌سایت</span><div ui="input-group"><span class="ltr">https://</span><input type="url" class="ltr" dir="ltr" placeholder="example.com"></div></label>
</div>

<div ui="grid" style="--bana-grid-min:16rem">
  <label ui="field"><span>توضیحات</span><textarea placeholder="هرچه می‌خواهید بنویسید؛ کادر خودکار بزرگ می‌شود"></textarea></label>
  <label ui="field"><span>شهر</span><select><option>تهران</option><option>شیراز</option><option>تبریز</option></select></label>
</div>

<div ui="grid" style="--bana-grid-min:14rem">
  <fieldset ui="field"><legend>اعلان‌ها</legend><div class="options" ui="options">
    <label ui="check"><input type="checkbox" checked><span>ایمیل</span></label>
    <label ui="check"><input type="checkbox"><span>پیامک</span></label>
    <label ui="check"><input type="checkbox" disabled><span>غیرفعال</span></label>
  </div></fieldset>
  <fieldset ui="field"><legend>پلن</legend><div ui="options">
    <label ui="check"><input type="radio" name="plan" checked><span>رایگان</span></label>
    <label ui="check"><input type="radio" name="plan"><span>حرفه‌ای</span></label>
  </div></fieldset>
  <fieldset ui="field"><legend>تنظیمات</legend><div ui="options">
    <label ui="check"><input type="checkbox" role="switch" checked><span>حالت شب</span></label>
    <label ui="check"><input type="checkbox" role="switch"><span>اعلان صوتی</span></label>
  </div></fieldset>
</div>

<div ui="grid" style="--bana-grid-min:16rem">
  <label ui="field"><span>صدا</span><input type="range" min="0" max="100" value="40"></label>
  <label ui="field"><span>تصویر پروفایل</span><input type="file" accept="image/*"><small>حداکثر ۲ مگابایت (فقط راهنما، نه محدودیت امنیتی).</small></label>
</div>

<div ui="stack">
  <input ui="input small" placeholder="small" aria-label="کوچک">
  <input ui="input" placeholder="medium" aria-label="متوسط">
  <input ui="input large" placeholder="large" aria-label="بزرگ">
</div>