المان ها
ورودی
رایجترین کنترل فرم، فیلدهای ورودی مبتنی بر متن است. شامل پشتیبانی از تمام انواع HTML5:
text, password, datetime,
datetime-local, date, month,
time, week, number, email,
url, search, tel و
color.
<div class="grid lg:grid-cols-3 gap-6">
<div>
<label for="simpleinput" class="text-gray-800 text-sm font-medium inline-block mb-2">Text</label>
<input type="text" id="simpleinput" class="form-input">
</div>
<div>
<label for="example-email" class="text-gray-800 text-sm font-medium inline-block mb-2">Email</label>
<input type="email" id="example-email" name="example-email" class="form-input" placeholder="Email">
</div>
<div>
<label for="example-password" class="text-gray-800 text-sm font-medium inline-block mb-2">Password</label>
<input type="password" id="example-password" class="form-input" value="password">
</div>
<div>
<label for="example-palaceholder" class="text-gray-800 text-sm font-medium inline-block mb-2">Placeholder</label>
<input type="text" id="example-palaceholder" class="form-input" placeholder="placeholder">
</div>
<div>
<label for="example-readonly" class="text-gray-800 text-sm font-medium inline-block mb-2">Readonly</label>
<input type="text" id="example-readonly" class="form-input" readonly="" value="Readonly value">
</div>
<div>
<label for="example-disable" class="text-gray-800 text-sm font-medium inline-block mb-2">Disabled</label>
<input type="text" class="form-input" id="example-disable" disabled="" value="Disabled value">
</div>
<div>
<label for="example-date" class="text-gray-800 text-sm font-medium inline-block mb-2">Date</label>
<input class="form-input" id="example-date" type="date" name="date">
</div>
<div>
<label for="example-month" class="text-gray-800 text-sm font-medium inline-block mb-2">Month</label>
<input class="form-input" id="example-month" type="month" name="month">
</div>
<div>
<label for="example-time" class="text-gray-800 text-sm font-medium inline-block mb-2">Time</label>
<input class="form-input" id="example-time" type="time" name="time">
</div>
<div>
<label for="example-week" class="text-gray-800 text-sm font-medium inline-block mb-2">Week</label>
<input class="form-input" id="example-week" type="week" name="week">
</div>
<div>
<label for="example-number" class="text-gray-800 text-sm font-medium inline-block mb-2">Number</label>
<input class="form-input" id="example-number" type="number" name="number">
</div>
<div>
<label for="example-color" class="text-gray-800 text-sm font-medium inline-block mb-2">Color</label>
<input class="form-input h-10" id="example-color" type="color" name="color" value="#1E85FF">
</div>
<div>
<label for="example-select" class="text-gray-800 text-sm font-medium inline-block mb-2">Input Select</label>
<select class="form-select" id="example-select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div>
<label for="example-multiselect" class="text-gray-800 text-sm font-medium inline-block mb-2">Multiple
Select</label>
<select id="example-multiselect" multiple class="form-input">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
ورودی های گروهی
بهراحتی کنترلهای فرم را با افزودن متن، دکمهها یا گروههای دکمه در هر دو طرف ورودیهای متنی، انتخابهای سفارشی و ورودیهای فایل سفارشی گسترش دهید.
@
example.com@
تومان
.00
پیشفرض
نام و نام خانوادگی
تومان
ریال
تومان
0.00
با متن چند خطی
<div class="grid lg:grid-cols-3 gap-6">
<div class="mb-5">
<div class="flex">
<div class="inline-flex items-center px-4 rounded-s border border-e-0 border-gray-200 bg-gray-50 text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">
@
</div>
<input type="text" placeholder="Username" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
</div>
<div class="mb-5">
<div class="flex">
<input type="text" placeholder="Recipient's username" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
<div class="inline-flex items-center px-4 rounded-e border border-s-0 border-gray-200 bg-gray-50 text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">
@example.com
</div>
</div>
</div>
<div class="mb-5">
<div class="flex">
<div class="inline-flex items-center px-4 rounded-s border border-e-0 border-gray-200 bg-gray-50 text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">
تومان
</div>
<input type="text" placeholder="" class="form-input rounded-none" />
<div class="inline-flex items-center px-4 rounded-e border border-s-0 border-gray-200 bg-gray-50 text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">
.00
</div>
</div>
</div>
<div>
<div class="flex rounded-md shadow-sm -space-x-px">
<span class="px-4 inline-flex items-center rounded-s border border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">Default</span>
<input type="text" class="form-input rounded-s-none">
</div>
</div>
<div>
<div class="sm:flex rounded-md shadow-sm">
<input type="text" class="form-input rounded-e-none">
<span class="py-2.5 px-4 inline-flex items-center min-w-fit w-full border border-gray-200 bg-gray-50 text-sm text-gray-500 -mt-px -ms-px first:rounded-t-lg last:rounded-b-lg sm:w-auto sm:first:rounded-l-lg sm:mt-0 sm:first:ms-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">
<svg class="hidden sm:block h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z">
</svg>
<svg class="sm:hidden mx-auto h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z">
</svg>
</span>
<input type="text" class="form-input rounded-s-none">
</div>
</div>
<div>
<div class="sm:flex rounded-md shadow-sm">
<input type="text" class="form-input rounded-e-none">
<input type="text" class="form-input rounded-s-none">
<span class="inline-flex items-center whitespace-nowrap px-4 rounded-e border border-s-0 border-gray-200 bg-gray-50 text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">First and last name</span>
</div>
</div>
<div>
<label for="simpleinput" class="text-gray-800 text-sm font-medium inline-block mb-2">Email Address</label>
<div class="relative">
<input type="email" id="leading-icon" name="leading-icon" class="form-input ps-11" placeholder="you@site.com">
<div class="absolute inset-y-0 start-4 flex items-center z-20">
<i class="mgc_mail_line text-lg text-gray-400"></i>
</div>
</div>
</div>
<div>
<label for="simpleinput" class="text-gray-800 text-sm font-medium inline-block mb-2">Text</label>
<div class="relative">
<input type="text" id="input-with-leading-and-trailing-icon" name="input-with-leading-and-trailing-icon" class="form-input ps-11 pe-14" placeholder="0.00">
<div class="absolute inset-y-0 start-4 flex items-center pointer-events-none z-20">
<span class="text-gray-500">تومان</span>
</div>
<div class="absolute inset-y-0 end-4 flex items-center pointer-events-none z-20">
<span class="text-gray-500">USD</span>
</div>
</div>
</div>
<div>
<label for="simpleinput" class="text-gray-800 text-sm font-medium inline-block mb-2">Text</label>
<div class="flex rounded-md shadow-sm">
<div class="inline-flex items-center px-4 rounded-s border border-s-0 border-gray-200 bg-gray-50 text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">
<span class="text-sm text-gray-500 dark:text-gray-400">http://</span>
</div>
<input type="text" name="input-with-add-on-url" id="input-with-add-on-url" class="form-input rounded-s-none" placeholder="www.example.com">
</div>
</div>
<div>
<label for="simpleinput" class="text-gray-800 text-sm font-medium inline-block mb-2">Text</label>
<div class="flex rounded-md shadow-sm">
<div class="px-4 inline-flex items-center min-w-fit rounded-l-md border border-r-0 border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-700">
<span class="text-sm text-gray-500 dark:text-gray-400">تومان</span>
</div>
<div class="px-4 inline-flex items-center min-w-fit border border-r-0 border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-700">
<span class="text-sm text-gray-500 dark:text-gray-400">0.00</span>
</div>
<input type="text" id="leading-multiple-add-on" name="inline-add-on" class="form-input rounded-s-none" placeholder="www.example.com">
</div>
</div>
<div>
<label for="simpleinput" class="text-gray-800 text-sm font-medium inline-block mb-2">Text</label>
<div class="flex rounded-md shadow-sm">
<span class="inline-flex items-center px-4 rounded-s border border-s-0 border-gray-200 bg-gray-50 text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">
<span class="text-sm text-gray-500 dark:text-gray-400">http://</span>
</span>
<input type="text" id="trailing-button-add-on-with-leading-and-trailing" name="trailing-button-add-on-with-leading-and-trailing" class="form-input rounded-none">
<button type="button" class="inline-flex items-center px-4 rounded-e bg-primary text-gray-100">
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
</svg>
</button>
</div>
</div>
<div>
<label for="simpleinput" class="text-gray-800 text-sm font-medium inline-block mb-2">Text</label>
<div class="relative flex rounded-md shadow-sm">
<input type="text" id="trailing-button-add-on-with-icon-and-button" name="trailing-button-add-on-with-icon-and-button" class="form-input ps-11">
<div class="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
<svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
</svg>
</div>
<button type="button" class="btn btn-sm bg-primary text-white rounded-s-none">Search</button>
</div>
</div>
<div>
<label for="simpleinput" class="text-gray-800 text-sm font-medium inline-block mb-2">Text</label>
<div class="flex rounded-md shadow-sm">
<button type="button" class="btn btn-sm bg-primary text-white rounded-e-none">
Button
</button>
<input type="text" id="leading-button-add-on" name="leading-button-add-on" class="form-input">
</div>
</div>
<div>
<label for="simpleinput" class="text-gray-800 text-sm font-medium inline-block mb-2">Text</label>
<div class="flex rounded-md shadow-sm">
<button type="button" class="btn btn-sm bg-primary text-white rounded-e-none">
Button
</button>
<button type="button" class="-me-px py-2.5 px-4 inline-flex justify-center items-center gap-2 border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-primary transition-all text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Button
</button>
<input type="text" id="leading-button-add-on-multiple-add-ons" name="leading-button-add-on-multiple-add-ons" class="form-input">
</div>
</div>
<div>
<label for="simpleinput" class="text-gray-800 text-sm font-medium inline-block mb-2">Text</label>
<div class="flex">
<div class="inline-flex items-center whitespace-nowrap px-3 rounded-s border border-e-0 border-gray-200 bg-gray-50 text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">
With textarea
</div>
<textarea rows="4" class="form-textarea ltr:rounded-s-none rtl:rounded-e-none"></textarea>
</div>
</div>
</div>
چک باکس
پیش فرض
غیرفعال
<div class="grid md:grid-cols-2 gap-6">
<div>
<h6 class="text-sm mb-2">Default</h6>
<div class="flex flex-col gap-2">
<div class="form-check">
<input type="checkbox" class="form-checkbox rounded text-primary" id="customCheck1">
<label class="ms-1.5" for="customCheck1">Check this checkbox</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-checkbox rounded text-primary" id="customCheck2">
<label class="ms-1.5" for="customCheck2">Check this checkbox</label>
</div>
</div>
</div>
<div>
<h6 class="text-sm mb-2">Disabled</h6>
<div class="flex flex-col gap-2">
<div class="opacity-75">
<input type="checkbox" class="form-checkbox rounded text-primary" id="customCheck5" checked disabled>
<label class="ms-1.5" for="customCheck5">Check this checkbox</label>
</div>
<div class="opacity-75">
<input type="checkbox" class="form-checkbox rounded text-primary" id="customCheck6" disabled>
<label class="ms-1.5" for="customCheck6">Check this checkbox</label>
</div>
</div>
</div>
<div class="flex flex-col gap-3">
<div>
<input class="form-checkbox rounded text-primary" type="checkbox" id="customckeck1" checked>
<label class="ms-1.5" for="customckeck1">Primary</label>
</div>
<div>
<input class="form-checkbox rounded text-success" type="checkbox" id="customckeck2" checked>
<label class="ms-1.5" for="customckeck2">Success</label>
</div>
<div>
<input class="form-checkbox rounded text-danger" type="checkbox" id="customckeck3" checked>
<label class="ms-1.5" for="customckeck3">Danger</label>
</div>
<div>
<input class="form-checkbox rounded text-warning" type="checkbox" id="customckeck4" checked>
<label class="ms-1.5" for="customckeck4">Warning</label>
</div>
<div>
<input class="form-checkbox rounded text-pink-500" type="checkbox" id="checkBox5" checked>
<label class="ms-1.5" for="checkBox5">Pink</label>
</div>
<div>
<input class="form-checkbox rounded text-blue" type="checkbox" id="checkBox7" checked>
<label class="ms-1.5" for="checkBox7">Blue</label>
</div>
<div>
<input class="form-checkbox rounded text-info" type="checkbox" id="checkBox8" checked>
<label class="ms-1.5" for="checkBox8">Info</label>
</div>
<div>
<input class="form-checkbox rounded text-dark" type="checkbox" id="checkBox9" checked>
<label class="ms-1.5" for="checkBox9">Dark</label>
</div>
</div>
<div class="flex flex-col gap-3">
<div>
<input class="form-checkbox rounded-full text-primary" type="checkbox" id="checkBox10" checked>
<label class="ms-1.5" for="checkBox10">Primary</label>
</div>
<div>
<input class="form-checkbox rounded-full text-success" type="checkbox" id="checkBox11" checked>
<label class="ms-1.5" for="checkBox11">Success</label>
</div>
<div>
<input class="form-checkbox rounded-full text-danger" type="checkbox" id="checkBox12" checked>
<label class="ms-1.5" for="checkBox12">Danger</label>
</div>
<div>
<input class="form-checkbox rounded-full text-warning" type="checkbox" id="checkBox13" checked>
<label class="ms-1.5" for="checkBox13">Warning</label>
</div>
<div>
<input class="form-checkbox rounded-full text-pink-500" type="checkbox" id="customckec14" checked>
<label class="ms-1.5" for="customckec14">Pink</label>
</div>
<div>
<input class="form-checkbox rounded-full text-blue" type="checkbox" id="checkBox15" checked>
<label class="ms-1.5" for="checkBox15">Blue</label>
</div>
<div>
<input class="form-checkbox rounded-full text-info" type="checkbox" id="checkBox16" checked>
<label class="ms-1.5" for="checkBox16">Info</label>
</div>
<div>
<input class="form-checkbox rounded-full text-dark" type="checkbox" id="checkBox17" checked>
<label class="ms-1.5" for="checkBox17">Dark</label>
</div>
</div>
</div>
رادیو
پیش فرض
غیرفعال
<div class="grid md:grid-cols-2 gap-6">
<div>
<h6 class="text-sm mb-2">Default</h6>
<div class="flex flex-col gap-2">
<div class="form-check">
<input type="radio" class="form-radio text-primary" name="formRadio" id="formRadio01" checked>
<label class="ms-1.5" for="formRadio01">Check this radio</label>
</div>
<div class="form-check">
<input type="radio" class="form-radio text-primary" name="formRadio" id="formRadio02">
<label class="ms-1.5" for="formRadio02">Check this radio</label>
</div>
</div>
</div>
<div>
<h6 class="text-sm mb-2">Disabled</h6>
<div class="flex flex-col gap-2">
<div class="opacity-75">
<input type="radio" class="form-radio text-primary" id="formRadio04" checked disabled>
<label class="ms-1.5" for="formRadio04">Check this radio</label>
</div>
<div class="opacity-75">
<input type="radio" class="form-radio text-primary" id="formRadio05" disabled>
<label class="ms-1.5" for="formRadio05">Check this radio</label>
</div>
</div>
</div>
<div class="flex flex-col gap-3">
<div>
<input class="form-radio text-primary" type="radio" id="formRadio10" checked>
<label class="ms-1.5" for="formRadio10">Primary</label>
</div>
<div>
<input class="form-radio text-success" type="radio" id="formRadio11" checked>
<label class="ms-1.5" for="formRadio11">Success</label>
</div>
<div>
<input class="form-radio text-danger" type="radio" id="formRadio12" checked>
<label class="ms-1.5" for="formRadio12">Danger</label>
</div>
<div>
<input class="form-radio text-warning" type="radio" id="formRadio13" checked>
<label class="ms-1.5" for="formRadio13">Warning</label>
</div>
<div>
<input class="form-radio text-pink-500" type="radio" id="formRadio14" checked>
<label class="ms-1.5" for="formRadio14">Pink</label>
</div>
<div>
<input class="form-radio text-blue" type="radio" id="formRadio15" checked>
<label class="ms-1.5" for="formRadio15">Blue</label>
</div>
<div>
<input class="form-radio text-info" type="radio" id="formRadio16" checked>
<label class="ms-1.5" for="formRadio16">Info</label>
</div>
<div>
<input class="form-radio text-dark" type="radio" id="formRadio17" checked>
<label class="ms-1.5" for="formRadio17">Dark</label>
</div>
</div>
<div class="flex flex-col gap-3">
<div>
<input class="form-radio rounded text-primary" type="radio" id="formRadio1" checked>
<label class="ms-1.5" for="formRadio1">Primary</label>
</div>
<div>
<input class="form-radio rounded text-success" type="radio" id="formRadio2" checked>
<label class="ms-1.5" for="formRadio2">Success</label>
</div>
<div>
<input class="form-radio rounded text-danger" type="radio" id="formRadio3" checked>
<label class="ms-1.5" for="formRadio3">Danger</label>
</div>
<div>
<input class="form-radio rounded text-warning" type="radio" id="formRadio4" checked>
<label class="ms-1.5" for="formRadio4">Warning</label>
</div>
<div>
<input class="form-radio rounded text-pink-500" type="radio" id="formRadio5" checked>
<label class="ms-1.5" for="formRadio5">Pink</label>
</div>
<div>
<input class="form-radio rounded text-blue" type="radio" id="formRadio7" checked>
<label class="ms-1.5" for="formRadio7">Blue</label>
</div>
<div>
<input class="form-radio rounded text-info" type="radio" id="formRadio8" checked>
<label class="ms-1.5" for="formRadio8">Info</label>
</div>
<div>
<input class="form-radio rounded text-dark" type="radio" id="formRadio9" checked>
<label class="ms-1.5" for="formRadio9">Dark</label>
</div>
</div>
</div>
سوییچ
پیش فرض
غیرفعال
رنگی
مربعی
<div class="grid xl:grid-cols-2 gap-6">
<div class="flex flex-col gap-3">
<h6 class="text-sm mb-2">Default</h6>
<div class="flex items-center">
<input class="form-switch" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="ms-1.5" for="flexSwitchCheckDefault">Default switch checkbox</label>
</div>
<div class="flex items-center">
<input class="form-switch" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="ms-1.5" for="flexSwitchCheckChecked">Checked switch checkbox</label>
</div>
</div>
<div class="flex flex-col gap-3">
<h6 class="text-sm mb-2">Disabled</h6>
<div class="flex items-center opacity-60">
<input class="form-switch" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
<label class="ms-1.5" for="flexSwitchCheckDisabled">Disabled Switch</label>
</div>
<div class="flex items-center opacity-60">
<input class="form-switch" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="ms-1.5" for="flexSwitchCheckCheckedDisabled">Disabled checked Switch</label>
</div>
</div>
<div class="flex flex-col gap-3">
<h6 class="text-sm mb-2">Colored</h6>
<div class="flex items-center">
<input type="checkbox" id="formSwitch" class="form-switch text-primary" checked>
<label for="formSwitch" class="ms-1.5">Primary</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="formSwitch2" class="form-switch text-warning" checked>
<label for="formSwitch2" class="ms-1.5">Warning</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="formSwitch3" class="form-switch text-danger" checked>
<label for="formSwitch3" class="ms-1.5">Danger</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="formSwitch4" class="form-switch text-success" checked>
<label for="formSwitch4" class="ms-1.5">Success</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="formSwitch5" class="form-switch text-secondary" checked>
<label for="formSwitch5" class="ms-1.5">Secondary</label>
</div>
</div>
<div class="flex flex-col gap-3">
<h6 class="text-sm mb-2">Square</h6>
<div class="flex items-center">
<input type="checkbox" id="formSwitch6" class="form-switch square text-primary" checked>
<label for="formSwitch6" class="ms-2">Primary</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="formSwitch7" class="form-switch square text-warning" checked>
<label for="formSwitch7" class="ms-2">Warning</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="formSwitch8" class="form-switch square text-danger" checked>
<label for="formSwitch8" class="ms-2">Danger</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="formSwitch9" class="form-switch square text-success" checked>
<label for="formSwitch9" class="ms-2">Success</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="formSwitch10" class="form-switch square text-secondary" checked>
<label for="formSwitch10" class="ms-2">Secondary</label>
</div>
</div>
</div>