انتخاب از فهرست

<Select
label="استان"
placeholder="انتخاب کنید"
hint="برای محاسبهٔ هزینهٔ ارسال"
options={[
  { value: "thr", label: "تهران" },
  { value: "isf", label: "اصفهان" },
  { value: "frs", label: "فارس" },
  { value: "krm", label: "کرمان" },
]}
/>

<div class="k-field">
  <label class="k-label" for=":r0R0:">استان</label>
  <div class="k-select">
    <select id=":r0R0:" class="k-select__control" aria-describedby=":r0R0:-hint"><option value="" disabled="" selected="">انتخاب کنید</option><option value="thr">تهران</option><option value="isf">اصفهان</option><option value="frs">فارس</option><option value="krm">کرمان</option></select>
  </div>
  <p class="k-hint" id=":r0R0:-hint">برای محاسبهٔ هزینهٔ ارسال</p>
</div>

<Select label="نقش" error="یک نقش انتخاب کنید." placeholder="انتخاب کنید" required>
<option value="admin">مدیر</option>
<option value="editor">ویرایشگر</option>
</Select>
<Select label="مرتب‌سازی" size="sm" defaultValue="new">
<option value="new">جدیدترین</option>
<option value="price">ارزان‌ترین</option>
</Select>

<div class="k-field">
  <label class="k-label" for=":r1R0:">نقش<span class="k-label__required" aria-hidden="true">*</span></label>
  <div class="k-select">
    <select id=":r1R0:" class="k-select__control" required="" aria-invalid="true" aria-describedby=":r1R0:-error"><option value="" disabled="" selected="">انتخاب کنید</option><option value="admin">مدیر</option><option value="editor">ویرایشگر</option></select>
  </div>
  <p class="k-hint k-hint--error" id=":r1R0:-error">یک نقش انتخاب کنید.</p>
</div>
<div class="k-field">
  <label class="k-label" for=":r2R0:">مرتب‌سازی</label>
  <div class="k-select k-select--sm">
    <select id=":r2R0:" class="k-select__control"><option value="new">جدیدترین</option><option value="price">ارزان‌ترین</option></select>
  </div>
</div>