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

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

کد / پیش‌نمایش نمونه
لورم ایپسوم به طور ساده متن مجازی چاپ و صنعت آماده‌سازی می‌باشد.
            
                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
پراپ (Prop) نوع (Type) شرح
بدون پراپ
FormCheck.Label
پراپ (Prop) نوع (Type) شرح
بدون پراپ
FormCheck.Input
پراپ (Prop) نوع (Type) شرح
بدون پراپ
FormInput
پراپ (Prop) نوع (Type) شرح
`formInputSize` `sm`, `lg` اندازه یا ابعاد میدان ورودی را مشخص می‌کند در یک فرم. از این ویژگی برای کنترل ظاهری استفاده کنید ظاهر میدان ورودی، با گزینه‌هایی مانند 'کوچک'، 'متوسط' یا 'بزرگ' برای تطابق با طراحی شما و نیازهای طرح و طرح."
`rounded` `boolean` آیا گوشه‌های گرد به عنصر متن‌گذاری اعمال شود
FormTextarea
پراپ (Prop) نوع (Type) شرح
`FormTextareaSize` `sm`, `lg` اندازه یا ابعاد میدان ورودی را مشخص می‌کند در یک فرم. از این ویژگی برای کنترل ظاهری استفاده کنید ظاهر میدان ورودی، با گزینه‌هایی مانند 'کوچک'، 'متوسط' یا 'بزرگ' برای تطابق با طراحی شما و نیازهای طرح و نیازهای طرح
`rounded` `boolean` آیا گوشه‌های گرد به عنصر متن‌گذاری اعمال شود
FormHelp
پراپ (Prop) نوع (Type) شرح
بدون پراپ
FormInline
پراپ (Prop) نوع (Type) شرح
بدون پراپ
FormLabel
پراپ (Prop) نوع (Type) شرح
بدون پراپ
FormSelect
پراپ (Prop) نوع (Type) شرح
`FormSelectSize` `sm`, `lg` این ویژگی (prop) اندازه یا ابعاد عنصر انتخابگر پایین‌ریز را در یک فرم تعیین می‌کند. شما می‌توانید از این ویژگی برای سفارشی‌سازی نمایش بصری ورودی select استفاده کنید، با ارائه انتخاب‌هایی مانند 'small'، 'medium' یا 'large' برای تطابق با ترجیحات طراحی و طرح‌بندی خود.
FormSwitch
پراپ (Prop) نوع (Type) شرح
بدون پراپ
FormSwitch.Label
پراپ (Prop) نوع (Type) شرح
بدون پراپ
FormSwitch.Input
پراپ (Prop) نوع (Type) شرح
بدون پراپ
InputGroup
پراپ (Prop) نوع (Type) شرح
بدون پراپ
InputGroup.Text
پراپ (Prop) نوع (Type) شرح
بدون پراپ