فرم معمولی
ورودی

فیلدهای ورودی بخش اساسی یک فرم وب هستند و به کاربران اجازه می‌دهند تا اطلاعاتی را فراهم کنند یا با برنامه شما تعامل داشته باشند. این بخش به نحوه استفاده از اجزاء ورودی در برنامه وب شما می‌پردازد و نمونه‌هایی از انواع استایل‌های ورودی را ارائه می‌دهد. اجزا در برنامه وب شما را فراهم می‌کند و نمونه‌هایی ارائه می‌دهد از انواع مختلف سبک‌های ورودی را ارائه می‌دهد.

کد / پیش‌نمایش نمونه
لورم ایپسوم به طور ساده متن مجازی چاپ و صنعت آماده‌سازی می‌باشد.
            
                HTMLOpenTagdivHTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="regular-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    Input
                                                        Text
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="regular-form-1" type="text" placeholder="ورودی متن" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="regular-form-6" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    فایل ورودی
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="regular-form-6" type="file" placeholder="ورودی فایل" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="regular-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    گرد
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="regular-form-2" type="text" placeholder="گرد" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 rounded-full"
HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="regular-form-3" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    With
                                                        Help
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="regular-form-3" type="text" placeholder="با راهنما" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="text-xs text-slate-500 mt-2"
HTMLCloseTag
    لورم ایپسوم به طور ساده متن مجازی چاپ و and
                                                        typesetting صنعت.
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="regular-form-4" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    رمز عبور
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="regular-form-4" type="password" placeholder="رمز عبور" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="regular-form-5" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    غیرفعال
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="regular-form-5" type="text" placeholder="غیرفعال" disabled="disabled" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

با استفاده از اجزای `ورودی` و سفارشی‌سازی ویژگی‌های آن، می‌توانید فیلدهای ورودی چند منظوره‌ای ایجاد کنید که نیازهای برنامه شما را برآورده کنند و تجربه کاربری سریع و بی‌دردسری ارائه دهند. حتماً نوع ورودی مناسب و قوانین اعتبارسنجی را براساس مورد استفاده خاص خود انتخاب کنید. تجربه کاربری یکپارچه را فراهم کنید. مطمئن شوید که نوع ورودی مناسب و قوانین اعتبارسنجی را بر اساس مورد استفاده خاص خود انتخاب کنید.

اندازه‌گیری ورودی

اندازه‌گیری ورودی یک جنبه مهم از طراحی رابط کاربری است. این به شما امکان می‌دهد که ابعاد فیلدهای ورودی را کنترل کنید تا مطمئن شوید که به خوبی در چیدمان برنامه شما جا می‌شوند. طراحی. این به شما امکان می‌دهد تا ابعاد فیلدهای ورودی را کنترل کنید تا اطمینان حاصل شود که به خوبی در چیدمان برنامه شما جا می‌شوند این بخش به نحوه تنظیم اندازه اجزای ورودی را پوشش می‌دهد و نمونه‌هایی از انواع مختلف این بخش به نحوه تنظیم اندازه اجزای ورودی می‌پردازد و نمونه‌هایی از گزینه‌های مختلف اندازه‌گیری را ارائه می‌دهد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label=".form-control-lg example" placeholder=".form-control-lg" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 text-lg py-1.5 px-4"
HTMLCloseTag
                                                HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="default input example" placeholder="ورودی پیشفرض" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 mt-2 mt-2"
HTMLCloseTag
                                                HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label=".form-control-sm example" placeholder=".form-control-sm" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 text-xs py-1.5 px-2 mt-2 mt-2"
HTMLCloseTag
            
        

کنترل اندازه اجزای ورودی برای دستیابی به یک طراحی دیداری جذاب و کاربرپسند ضروری است. با استفاده از اجزای `ورودی` و مشخص کردن اندازه مورد نظر، می‌توانید مطمئن شوید که فیلدهای ورودی با نیازهای چیدمان و استایل برنامه شما هماهنگی داشته باشند. برای دستیابی به یک طراحی جذاب و کاربرپسند طراحی. با استفاده از اجزاء `ورودی` و مشخص کردن اندازه مورد نظر، می‌توانید مطمئن شوید که فیلدهای ورودی با نیازهای چیدمان و استایل برنامه شما هماهنگی داشته باشند. با اندازه‌های مختلف آزمایش کنید تا اندازه‌ای را پیدا کنید که بهترین تطابق با اهداف طراحی شما را داشته باشد و تجربه کاربری بهینه را ارائه دهد. با اندازه‌های مختلف آزمایش کنید تا اندازه‌ای را پیدا کنید که بهترین تطابق با اهداف طراحی شما را داشته باشد و تجربه کاربری بهینه را ارائه دهد.

گروه‌های ورودی

گروه‌های ورودی عنصر رابط کاربری مفیدی برای ترکیب ورودی‌های فرم هستند ورودی‌ها با متن یا آیکون‌های اضافی استفاده می‌شوند. آن‌ها اغلب برای ایجاد فیلدهای ورودی با تطابق بصری و متناسب با از آن‌ها استفاده می‌شود. این بخش به نحوه ایجاد گروه‌های ورودی با استفاده از اجزاء `InputGroup` و نمونه‌های مختلف پیکربندی گروه‌های ورودی را ارائه می‌دهد.

کد / پیش‌نمایش نمونه
@
.00
@
.00
            
                HTMLOpenTagdiv
    data-tw-merge
    class="flex group input-group"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    id="input-group-email" class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r"
HTMLCloseTag
    @
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="ایمیل" aria-describedby="input-group-email" placeholder="ایمیل" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-merge
    class="flex group input-group mt-2"
HTMLCloseTag
    HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="قیمت" aria-describedby="input-group-price" placeholder="قیمت" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    id="input-group-price" class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r"
HTMLCloseTag
    .00
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-merge
    class="flex group input-group mt-2"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r"
HTMLCloseTag
    @
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="مقدار (to the nearest dollar)" placeholder="قیمت" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r"
HTMLCloseTag
    .00
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
            
        

گروه‌های ورودی ابزار چند منظوره‌ای برای افزایش کارایی و جذابیت بصری فرم‌های شما هستند. آیا شما نیاز به اضافه کردن آیکون‌ها، برچسب‌ها یا متن‌های اضافی به فیلدهای ورودی دارید، اجزاء `InputGroup` به شما امکان می‌دهد تا گروه‌های ورودی متمایز و اطلاعاتی ایجاد کنید. با آزمایش پیکربندی‌های مختلف، بهترین روش برای ارائه عناصر فرم و بهبود با اندازه‌های مختلف آزمایش کنید تا اندازه‌ای را پیدا کنید که بهترین تطابق با اهداف طراحی شما را داشته باشد و تجربه کاربری بهینه را ارائه دهد.

وضعیت ورودی

وضعیت یا اعتبار ورودی‌های فرم به کاربران بازخورد بصری می‌دهند. این بخش به نحوه اعمال وضعیت‌های مختلف به ورودی‌های فرم با استفاده از کلاس‌های CSS می‌پردازد و نمونه‌هایی از وضعیت‌های مختلف ورودی را ارائه می‌دهد. وضعیت یا اعتبار ورودی‌های فرم را پوشش می‌دهد. این بخش نحوه اعمال وضعیت‌های مختلف به ورودی‌های فرم با استفاده از کلاس‌های CSS را مشخص می‌کند و نمونه‌هایی از وضعیت‌های مختلف ورودی را ارائه می‌دهد.

کد / پیش‌نمایش نمونه
رمز عبور قوی
تلاش برای اتصال مجدد به سرور...
این فیلد اجباری است
            
                HTMLOpenTagdivHTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="input-state-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    ورودی موفق
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="input-state-1" type="text" placeholder="ورودی متن" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 border-success border-success"
HTMLCloseTag
                                                    HTMLOpenTagdiv class="grid w-full h-1 grid-cols-12 gap-4 mt-3"HTMLCloseTag
                                                        HTMLOpenTagdiv class="h-full col-span-3 rounded bg-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="h-full col-span-3 rounded bg-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="h-full col-span-3 rounded bg-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
                                                            class="h-full col-span-3 rounded bg-slate-100 dark:bg-darkmode-800"HTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="mt-2 text-success"HTMLCloseTagرمز عبور قویHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="input-state-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    اخطار ورودی
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="input-state-2" type="text" placeholder="ورودی متن" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 border-warning border-warning"
HTMLCloseTag
                                                    HTMLOpenTagdiv class="mt-2 text-warning"HTMLCloseTag
                                                        تلاش برای اتصال مجدد به سرور...
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="input-state-3" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    Input
                                                        Error
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="input-state-3" type="text" placeholder="ورودی متن" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 border-danger border-danger"
HTMLCloseTag
                                                    HTMLOpenTagdiv class="mt-2 text-danger"HTMLCloseTag
                                                        این فیلد اجباری است
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

وضعیت‌های ورودی برای ارائه بازخورد به کاربران و افزایش تجربه کاربری در فرم‌های شما بسیار حیاتی هستند. با استفاده از کلاس‌های وضعیت مناسب، می‌توانید وضعیت هر فیلد ورودی را به صورت بصری ارتباط برقرار کنید و این امر باعث می‌شود که کاربران بهتر بتوانند با فرم‌های شما تعامل کنند و آن‌ها را درک کنند. با آزمایش انواع استایل‌ها و وضعیت‌ها، طراحی و عملکرد برنامه وب خود را بهتر به هم پیوندید. و بهبود تجربه کاربری در فرم‌های شما. با اعمال کلاس‌های مناسب وضعیت، می‌توانید به صورت بصری وضعیت هر فیلد ورودی را ارتباط برقرار کنید و آن را برای کاربران آسان‌تر کنید تا با فرم‌های شما درک و تعامل کنند. با آزمایش استایل‌ها و وضعیت‌های مختلف برای تطبیق طراحی و عملکرد برنامه وب شما. اپلیکیشن

انتخاب گزینه‌ها

مؤلفه "انتخاب گزینه‌ها" به شما امکان می‌دهد تا عناصر انتخابی را با گزینه‌های مختلف ایجاد کنید. این بخش در مورد استفاده از این مؤلفه توضیحاتی ارائه می‌دهد و نمونه‌های مختلفی از گزینه‌های انتخاب را فراهم می‌کند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col items-center sm:flex-row"HTMLCloseTag
                                                    HTMLOpenTagselect
    data-tw-merge
    aria-label=".form-select-lg example" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 rtl:pl-8 ltr:pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 text-lg py-1.5 rtl:pr-4 ltr:pl-4 rtl:pl-8 ltr:pr-8 rtl:sm:ml-2 ltr:sm:mr-2 sm:mt-2 rtl:sm:ml-2 ltr:sm:mr-2 sm:mt-2"
HTMLCloseTag
    HTMLOpenTagoptionHTMLCloseTagکریس ایوانزHTMLOpenTag/optionHTMLCloseTag
                                                        HTMLOpenTagoptionHTMLCloseTagلیام نیسونHTMLOpenTag/optionHTMLCloseTag
                                                        HTMLOpenTagoptionHTMLCloseTagدنیل کریگHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
                                                    HTMLOpenTagselect
    data-tw-merge
    aria-label="پیش‌فرض select example" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 rtl:pl-8 ltr:pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 mt-2 rtl:sm:ml-2 ltr:sm:mr-2 mt-2 rtl:sm:ml-2 ltr:sm:mr-2"
HTMLCloseTag
    HTMLOpenTagoptionHTMLCloseTagکریس ایوانزHTMLOpenTag/optionHTMLCloseTag
                                                        HTMLOpenTagoptionHTMLCloseTagلیام نیسونHTMLOpenTag/optionHTMLCloseTag
                                                        HTMLOpenTagoptionHTMLCloseTagدنیل کریگHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
                                                    HTMLOpenTagselect
    data-tw-merge
    aria-label=".form-select-sm example" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 rtl:pl-8 ltr:pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 text-xs py-1.5 rtl:pr-2 ltr:pl-2 rtl:pl-8 ltr:pr-8 mt-2 mt-2"
HTMLCloseTag
    HTMLOpenTagoptionHTMLCloseTagکریس ایوانزHTMLOpenTag/optionHTMLCloseTag
                                                        HTMLOpenTagoptionHTMLCloseTagلیام نیسونHTMLOpenTag/optionHTMLCloseTag
                                                        HTMLOpenTagoptionHTMLCloseTagدنیل کریگHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

مؤلفه "انتخاب گزینه‌ها" یک ابزار چندمنظوره برای ایجاد عناصر انتخاب کشویی با گزینه‌های متنوع است. شما می‌توانید از آن برای ساخت انواع فرم‌ها و رابط‌های کاربری استفاده کنید که نیاز به انتخاب کاربر از انتخاب‌های پیش‌تعیین شده دارند. گزینه‌ها و استایل‌ها را براساس نیازهای پروژه‌ی خود سفارشی‌سازی کرده و تجربه‌ی کاربری را برای کاربران بهتر و کارآمدتر کنید.

فرم عمودی

مؤلفه "فرم عمودی" به شما امکان می‌دهد تا فرم‌هایی با چیدمان عمودی ایجاد کنید، جایی که فیلدها و برچسب‌های فرم به صورت پشت سر هم قرار می‌گیرند. این بخش در مورد استفاده از این مؤلفه توضیحاتی ارائه می‌دهد و نمونه‌هایی از فرم‌های عمودی را فراهم می‌کند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdivHTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="vertical-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    ایمیل
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="vertical-form-1" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="vertical-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    رمز عبور
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="vertical-form-2" type="text" placeholder="secret" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-5 mt-5"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="vertical-form-3" value=""
HTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="vertical-form-3" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagمرا به خاطر بسپارHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mt-5 mt-5"
HTMLCloseTagورودHTMLOpenTag/buttonHTMLCloseTag
            
        

مؤلفه "فرم عمودی" برای ایجاد فرم‌هایی با چیدمان ساده و روشن ایده‌آل است، که تجربه کاربری بی‌سر و صدا را تضمین می‌کند. آن را براساس نیازهای پروژه‌ی خود سفارشی‌سازی کنید، مانند افزودن اعتبارسنجی، رفع خطاها و استایل‌دهی. این مؤلفه فرآیند ایجاد فرم‌ها را ساده‌تر می‌کند و جمع‌آوری ورودی‌های کاربر را به راحتی در یک ساختار مرتب انجام می‌دهد.

فرم افقی

مؤلفه "فرم افقی" به شما امکان می‌دهد تا فرم‌هایی با چیدمان افقی ایجاد کنید، جایی که برچسب‌های فرم به چپ فیلدهای فرم قرار می‌گیرند. این بخش در مورد استفاده از این مؤلفه توضیحاتی ارائه می‌دهد و نمونه‌هایی از فرم‌های افقی را فراهم می‌کند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv
    data-tw-merge
    class="block sm:flex items-center group form-inline"
HTMLCloseTag
    HTMLOpenTaglabel
    data-tw-merge
    for="horizontal-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left sm:w-20"
HTMLCloseTag
    ایمیل
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="horizontal-form-1" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-merge
    class="block sm:flex items-center group form-inline mt-5"
HTMLCloseTag
    HTMLOpenTaglabel
    data-tw-merge
    for="horizontal-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left sm:w-20"
HTMLCloseTag
    رمز عبور
HTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    id="horizontal-form-2" type="password" placeholder="secret" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-5 rtl:sm:mr-20 ltr:sm:ml-20 rtl:sm:pr-5 ltr:sm:pl-5 mt-5 rtl:sm:mr-20 ltr:sm:ml-20 rtl:sm:pr-5 ltr:sm:pl-5"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="horizontal-form-3" value=""
HTMLCloseTag
                                                    HTMLOpenTaglabel
    data-tw-merge
    for="horizontal-form-3" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagمرا به خاطر بسپارHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-5 rtl:sm:mr-20 ltr:sm:ml-20 rtl:sm:pr-5 ltr:sm:pl-5"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagورودHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

مؤلفه "فرم افقی" برای ایجاد فرم‌هایی با چیدمان افقی سنتی مفید است، جایی که برچسب‌ها به چپ فیلدهای ورودی قرار می‌گیرند. آن را براساس نیازهای پروژه خود سفارشی‌سازی کنید، مانند افزودن اعتبارسنجی، انجام کارهای رفع خطا و استایل‌دهی. این مؤلفه فرآیند ایجاد فرم‌ها را ساده‌تر می‌کند و جمع‌آوری ورودی‌های کاربر را به راحتی در یک ساختار مرتب انجام می‌دهد.

فرم درون‌خطی

مؤلفه "فرم درون‌خطی" به شما امکان می‌دهد تا فرم‌هایی با عناصر درون‌خطی ایجاد کنید، جایی که فیلدها و برچسب‌های فرم افقی روی همان خط ظاهر می‌شوند. این بخش در مورد استفاده از این مؤلفه توضیحاتی ارائه می‌دهد و نمونه‌هایی از فرم‌های درون‌خطی را فراهم می‌کند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="grid grid-cols-12 gap-2"HTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="default input inline 1" placeholder="ورودی درون خطی 1" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 col-span-4 col-span-4"
HTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="default input inline 2" placeholder="ورودی درون خطی 2" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 col-span-4 col-span-4"
HTMLCloseTag
                                                    HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="default input inline 3" placeholder="ورودی درون خطی 3" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 col-span-4 col-span-4"
HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

مؤلفه "فرم درون‌خطی" برای ایجاد فرم‌های فشرده و با بهره‌وری فضا مفید است که در آن فیلدها و برچسب‌های فرم روی همان خط ظاهر می‌شوند. آن را براساس نیازهای پروژه‌ی خود سفارشی‌سازی کنید، مانند افزودن اعتبارسنجی، رفع خطاها و استایل‌دهی. این مؤلفه راهی ساده و مختصر برای جمع‌آوری ورودی کاربر به صورت درون‌خطی فراهم می‌کند که برای نوارهای جستجو، فیلترها و سایر عناصر فرم فشرده ایده‌آل است.

چک باکس و سوییچ

مؤلفه‌های "چک‌باکس و سوئیچ" روشی را برای ایجاد چک‌باکس‌ها و سوئیچ‌های تعاملی فراهم می‌کنند که کاربران می‌توانند آن‌ها را روشن یا خاموش کنند. این بخش شرحی از نحوه استفاده از این مؤلفه‌ها را ارائه می‌دهد و نمونه‌هایی از چک‌باکس‌ها و سوئیچ‌ها فراهم می‌کند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdivHTMLCloseTag
                                                    HTMLOpenTaglabelHTMLCloseTagچک باکس عمودیHTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-1" value=""
HTMLCloseTag
                                                        HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-1" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagکریس ایوانزHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-2" value=""
HTMLCloseTag
                                                        HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-2" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagلیام نیسونHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-3" value=""
HTMLCloseTag
                                                        HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-3" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagدنیل کریگHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabelHTMLCloseTagچک باکس افقیHTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTagdiv class="flex flex-col mt-2 sm:flex-row"HTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center rtl:ml-2 ltr:mr-2 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-4" value=""
HTMLCloseTag
                                                            HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-4" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagکریس ایوانزHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 rtl:ml-2 ltr:mr-2 sm:mt-0 mt-2 rtl:ml-2 ltr:mr-2 sm:mt-0"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-5" value=""
HTMLCloseTag
                                                            HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-5" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagلیام نیسونHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 rtl:ml-2 ltr:mr-2 sm:mt-0 mt-2 rtl:ml-2 ltr:mr-2 sm:mt-0"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-6" value=""
HTMLCloseTag
                                                            HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-6" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagدنیل کریگHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabelHTMLCloseTagسوییچHTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTagdiv class="mt-2"HTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50 w-[38px] h-[24px] p-px rounded-full relative before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] rtl:before:transition-[margin-right] ltr:before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600 checked:bg-primary checked:border-primary checked:bg-none rtl:before:checked:mr-[14px] ltr:before:checked:ml-[14px] before:checked:bg-white w-[38px] h-[24px] p-px rounded-full relative before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] rtl:before:transition-[margin-right] ltr:before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600 checked:bg-primary checked:border-primary checked:bg-none rtl:before:checked:mr-[14px] ltr:before:checked:ml-[14px] before:checked:bg-white" id="checkbox-switch-7"
HTMLCloseTag
                                                            HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-7" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagورودی چک باکس سوئیچ پیش‌فرضHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

مؤلفه‌های "چک‌باکس و سوئیچ" راهی آسان برای ایجاد عناصر تعاملی برای ورودی کاربر فراهم می‌کنند. آن‌ها را براساس نیازهای پروژه‌ی خود سفارشی‌سازی کنید و از رویدادها برای پاسخ به تعاملات کاربر استفاده کنید. این مؤلفه‌ها معمولاً برای تنظیمات، ترجیحات، و فرم‌هایی استفاده می‌شوند که کاربران نیاز به انتخاب‌های دودویی دارند.

رادیو

مؤلفه "رادیو" یک عنصر ورودی اساسی است که به کاربران اجازه می‌دهد یک انتخاب تکی از بین گزینه‌های موجود انجام دهند. این مؤلفه به طور معمول در فرم‌ها و پرسشنامه‌ها استفاده می‌شود که کاربران باید یک گزینه را از بین چند گزینه انتخاب کنند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdivHTMLCloseTag
                                                    HTMLOpenTaglabelHTMLCloseTagرادیو باتن عمودیHTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-1" name="vertical_radio_button" value="vertical-radio-chris-evans"
HTMLCloseTag
                                                        HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-1" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagکریس ایوانزHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-2" name="vertical_radio_button" value="vertical-radio-liam-neeson"
HTMLCloseTag
                                                        HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-2" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagلیام نیسونHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-3" name="vertical_radio_button" value="vertical-radio-daniel-craig"
HTMLCloseTag
                                                        HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-3" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagدنیل کریگHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabelHTMLCloseTagرادیو باتن افقیHTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTagdiv class="flex flex-col mt-2 sm:flex-row"HTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center rtl:ml-2 ltr:mr-2 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-4" name="horizontal_radio_button" value="horizontal-radio-chris-evans"
HTMLCloseTag
                                                            HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-4" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagکریس ایوانزHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 rtl:ml-2 ltr:mr-2 sm:mt-0 mt-2 rtl:ml-2 ltr:mr-2 sm:mt-0"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-5" name="horizontal_radio_button" value="horizontal-radio-liam-neeson"
HTMLCloseTag
                                                            HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-5" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagلیام نیسونHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 rtl:ml-2 ltr:mr-2 sm:mt-0 mt-2 rtl:ml-2 ltr:mr-2 sm:mt-0"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-6" name="horizontal_radio_button" value="horizontal-radio-daniel-craig"
HTMLCloseTag
                                                            HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-6" class="cursor-pointer rtl:mr-2 ltr:ml-2"
HTMLCloseTagدنیل کریگHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

مؤلفه "رادیو" چندکاره است و می‌تواند برای ایجاد گروه‌های رادیو باتن عمودی و افقی استفاده شود. این دکمه‌های رادیو به طور معمول در فرم‌ها، نظرسنجی‌ها و هر سناریو که نیاز به انتخاب‌های انحصاری دارد، استفاده می‌شوند.

رابط اجزاء

در این بخش، شما اطلاعات دقیقی درباره ویژگی‌ها، کلاس‌ها، و گزینه‌های موجود که می‌توان با این مؤلفه استفاده کرد را پیدا خواهید کرد. درک این ویژگی‌ها برای سفارشی‌سازی و پیکربندی مؤلفه برای تنظیمات خاص شما بسیار مهم است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

FormCheck
پراپ نوع شرح
بدون پراپ
FormCheck.Label
پراپ نوع شرح
بدون پراپ
FormCheck.Input
پراپ نوع شرح
بدون پراپ
FormInput
پراپ نوع شرح
`formInputSize` `sm`, `lg` اندازه یا ابعاد میدان ورودی را مشخص می‌کند در یک فرم. از این ویژگی برای کنترل ظاهری استفاده کنید ظاهر میدان ورودی، با گزینه‌هایی مانند 'کوچک'، 'متوسط' یا 'بزرگ' برای تطابق با طراحی شما و نیازهای طرح و طرح."
`rounded` `boolean` آیا برای اعمال گوشه‌های گرد به عنصر textarea استفاده شود؟
FormTextarea
پراپ نوع شرح
`FormTextareaSize` `sm`, `lg` اندازه یا ابعاد میدان ورودی را مشخص می‌کند در یک فرم. از این ویژگی برای کنترل ظاهری استفاده کنید ظاهر میدان ورودی، با گزینه‌هایی مانند 'کوچک'، 'متوسط' یا 'بزرگ' برای تطابق با طراحی شما و نیازهای طرح و نیازهای طرح
`rounded` `boolean` آیا برای اعمال گوشه‌های گرد به عنصر textarea استفاده شود؟
FormHelp
پراپ نوع شرح
بدون پراپ
FormInline
پراپ نوع شرح
بدون پراپ
FormLabel
پراپ نوع شرح
بدون پراپ
FormSelect
پراپ نوع شرح
`FormSelectSize` `sm`, `lg` این prop ابعاد یا اندازهٔ عنصر کشویی select در یک فرم را تعیین می‌کند. از این prop برای سفارشی‌سازی نمایش بصری ورودی select استفاده کنید، با ارائهٔ انتخاب‌هایی مانند 'کوچک'، 'متوسط' یا 'بزرگ' برای تطابق با ترجیحات طراحی و طرح‌بندی شما.
FormSwitch
پراپ نوع شرح
بدون پراپ
FormSwitch.Label
پراپ نوع شرح
بدون پراپ
FormSwitch.Input
پراپ نوع شرح
بدون پراپ
InputGroup
پراپ نوع شرح
بدون پراپ
InputGroup.Text
پراپ نوع شرح
بدون پراپ