Skip to main content

Forms

Warning : Experimental Feature. Still in development.

Forms are used to collect data from users. They are an essential part of any website or application, as they allow users to input and submit data. They are also used to make filters, searches, and other actions.

Forms are crucial in web development as they enable users to input and submit data, significantly shaping the user experience. ravixUI employs semantic HTML for all form components, ensuring their accessibility. However, it’s important to note that while the form elements themselves are accessible, there are numerous additional factors beyond the components that must be addressed to guarantee the overall accessibility of forms.

For a deeper understanding of how to make forms accessible, you can refer to the tutorial on forms provided by W3C . Since forms require user input and data, there maybe some additional considerations that need to be satisfied based on the use case.

Form Components

Forms are usually made up of labels and input fields with action buttons. Some of the commonly used form components are:

  • Text Fields: Used to collect data in text format from users.
  • Select Fields: Used when you want to limit the user’s input to a specific set of options.
  • Checkbox Fields: Used to collect user preferences or when a user can select multiple options.
  • Radio Buttons: Used to collect data in a radio button format from users.
  • Buttons: Used to submit/reset the form or trigger another type of action.

Note: ravixUI only provides the basic form components out of the box. It does not provide any validation, sanization, or error handling. You will need to implement these yourself including connecting the form to a backend.

Text Fields

Text fields are multipurpose input fields that can be used for collecting text data from users. Some of the commonly used text fields are given below:

Between 3 and 20 characters.
format: [email protected] 
<form
  class="flex w-full flex-col items-start justify-start gap-4 p-6 text-base text-zinc-950 dark:text-gray-50"
>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="name1"
      >Name<span class="ml-1 text-red-500" aria-hidden="true">*</span></label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="text"
      id="name1"
      name="name"
      required
      aria-describedby="name1-details"
    />
    <span id="name1-details" class="text-sm text-gray-500 dark:text-zinc-400"
      >Between 3 and 20 characters.</span
    >
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="email1"
      >Email<span class="ml-1 text-red-500" aria-hidden="true">*</span></label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="email"
      id="email1"
      name="email"
      required
      aria-describedby="email1-details"
    />
    <span id="email1-details" class="text-sm text-gray-500 dark:text-zinc-400"
      >format: [email protected]</span
    >
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="password1"
      >Password<span class="ml-1 text-red-500" aria-hidden="true">*</span
      ></label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="password"
      id="password1"
      name="password"
      required
    />
    <div
      id="password1-details"
      aria-hidden="true"
      class="text-sm text-gray-500 dark:text-zinc-400"
    >
      Must be between 6 and 20 characters.
    </div>
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="age1">Age</label>
    <input
      class="min-w-max rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="number"
      id="age1"
      name="age"
      min="18"
      max="99"
      minlength="1"
      maxlength="2"
      required
    />
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="comments1">Comments using textarea field</label>
    <textarea
      class="w-full rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      id="comments1"
      name="comments"
      placeholder="Your feedback is important to us"
      style="resize: none"></textarea>
  </div>
</form>
TextVariants.astro
<form
  class="flex w-full flex-col items-start justify-start gap-4 p-6 text-base text-zinc-950 dark:text-gray-50"
>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="name1"
      >Name<span class="ml-1 text-red-500" aria-hidden="true">*</span></label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="text"
      id="name1"
      name="name"
      required
      aria-describedby="name1-details"
    />
    <span id="name1-details" class="text-sm text-gray-500 dark:text-zinc-400"
      >Between 3 and 20 characters.</span
    >
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="email1"
      >Email<span class="ml-1 text-red-500" aria-hidden="true">*</span></label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="email"
      id="email1"
      name="email"
      required
      aria-describedby="email1-details"
    />
    <span id="email1-details" class="text-sm text-gray-500 dark:text-zinc-400"
      >format: [email protected]</span
    >
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="password1"
      >Password<span class="ml-1 text-red-500" aria-hidden="true">*</span
      ></label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="password"
      id="password1"
      name="password"
      required
    />
    <div
      id="password1-details"
      aria-hidden="true"
      class="text-sm text-gray-500 dark:text-zinc-400"
    >
      Must be between 6 and 20 characters.
    </div>
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="age1">Age</label>
    <input
      class="min-w-max rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="number"
      id="age1"
      name="age"
      min="18"
      max="99"
      minlength="1"
      maxlength="2"
      required
    />
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="comments1">Comments using textarea field</label>
    <textarea
      class="w-full rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      id="comments1"
      name="comments"
      placeholder="Your feedback is important to us"
      style="resize: none"></textarea>
  </div>
</form>

Note: Placeholders are used only for non critical fields to provide additional information. For important fields, another div/span is used to display the information and is connected to the input field using aria-describedby.

Select Fields

Select fields are used when you want to limit the user’s input when there are multiple options to choose from.

SelectVariants.html
<form
  class="flex w-full flex-col items-start justify-start gap-4 p-6 text-zinc-950 dark:text-gray-50"
>
  <div class="mb-4">
    <label
      for="country"
      class="mb-1 block text-base after:ml-1 after:text-red-500 after:content-['*']"
      >Select your country</label
    >
    <select
      id="country"
      class="w-96 rounded-md border border-gray-400 bg-gray-50 p-3 text-black focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white"
    >
      <option selected>Choose a country</option>
      <option value="US">United States</option>
      <option value="CA">Canada</option>
      <option value="FR">France</option>
      <option value="DE">Germany</option>
    </select>
  </div>


  <div class="mb-4">
    <label
      for="language"
      class="mb-1 block text-base after:ml-1 after:text-red-500 after:content-['*']"
      >Select your language</label
    >
    <select
      id="language"
      class="w-96 rounded-md border border-gray-400 bg-gray-50 p-3 text-black focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white"
    >
      <option selected>Choose a language</option>
      <option value="english">English</option>
      <option value="french">French</option>
      <option value="german">German</option>
      <option value="spanish">Spanish</option>
    </select>
  </div>


  <div>
    <label
      for="timezone"
      class="mb-1 block text-base after:ml-1 after:text-red-500 after:content-['*']"
      >Select your timezone</label
    >
    <select
      id="timezone"
      class="w-96 rounded-md border border-gray-400 bg-gray-50 p-3 text-black focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white"
    >
      <option selected>Choose a timezone</option>
      <option value="pst">Pacific Standard Time</option>
      <option value="mst">Mountain Standard Time</option>
      <option value="cst">Central Standard Time</option>
      <option value="est">Eastern Standard Time</option>
    </select>
  </div>
</form>
SelectVariants.astro
<form
  class="flex w-full flex-col items-start justify-start gap-4 p-6 text-zinc-950 dark:text-gray-50"
>
  <div class="mb-4">
    <label
      for="country"
      class="mb-1 block text-base after:ml-1 after:text-red-500 after:content-['*']"
      >Select your country</label
    >
    <select
      id="country"
      class="w-96 rounded-md border border-gray-400 bg-gray-50 p-3 text-black focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white"
    >
      <option selected>Choose a country</option>
      <option value="US">United States</option>
      <option value="CA">Canada</option>
      <option value="FR">France</option>
      <option value="DE">Germany</option>
    </select>
  </div>


  <div class="mb-4">
    <label
      for="language"
      class="mb-1 block text-base after:ml-1 after:text-red-500 after:content-['*']"
      >Select your language</label
    >
    <select
      id="language"
      class="w-96 rounded-md border border-gray-400 bg-gray-50 p-3 text-black focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white"
    >
      <option selected>Choose a language</option>
      <option value="english">English</option>
      <option value="french">French</option>
      <option value="german">German</option>
      <option value="spanish">Spanish</option>
    </select>
  </div>


  <div>
    <label
      for="timezone"
      class="mb-1 block text-base after:ml-1 after:text-red-500 after:content-['*']"
      >Select your timezone</label
    >
    <select
      id="timezone"
      class="w-96 rounded-md border border-gray-400 bg-gray-50 p-3 text-black focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white"
    >
      <option selected>Choose a timezone</option>
      <option value="pst">Pacific Standard Time</option>
      <option value="mst">Mountain Standard Time</option>
      <option value="cst">Central Standard Time</option>
      <option value="est">Eastern Standard Time</option>
    </select>
  </div>
</form>

Checkbox Fields

Checkbox fields are used to collect user preferences or when a user can select multiple options.

CheckboxVariants.html
<form
  class="flex w-full flex-col items-start justify-start gap-4 p-6 text-zinc-950 dark:text-gray-50"
>
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="checkbox"
      id="checkbox1"
      value="checkbox1"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="checkbox1" class="block text-base">Receive notifications</label>
  </div>
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="checkbox"
      id="checkbox2"
      value="checkbox2"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="checkbox2" class="block text-base"
      >Send Promotional Emails</label
    >
  </div>
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="checkbox"
      id="checkbox3"
      value="checkbox3"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="checkbox3" class="block text-base">Read Privacy Policy</label>
  </div>
</form>
CheckboxVariants.astro
<form
  class="flex w-full flex-col items-start justify-start gap-4 p-6 text-zinc-950 dark:text-gray-50"
>
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="checkbox"
      id="checkbox1"
      value="checkbox1"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="checkbox1" class="block text-base">Receive notifications</label>
  </div>
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="checkbox"
      id="checkbox2"
      value="checkbox2"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="checkbox2" class="block text-base"
      >Send Promotional Emails</label
    >
  </div>
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="checkbox"
      id="checkbox3"
      value="checkbox3"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="checkbox3" class="block text-base">Read Privacy Policy</label>
  </div>
</form>

Radio Buttons

Radio buttons are a great way to ensure the user selects only one option from a group of choices.

RadioVariants.html
<form
  class="flex w-full flex-col items-start justify-start gap-2 p-6 text-zinc-950 dark:text-gray-50"
>
  <label
    class="mb-4 text-base after:ml-1 after:text-red-500 after:content-['*']"
    >Choose the color for your shirt</label
  >
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="radio"
      id="radio1"
      name="radio-group"
      value="red"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="radio1" class="block text-base">Red</label>
  </div>
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="radio"
      id="radio2"
      name="radio-group"
      value="blue"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="radio2" class="block text-base">Blue</label>
  </div>
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="radio"
      id="radio3"
      name="radio-group"
      value="green"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="radio3" class="block text-base">Green</label>
  </div>
</form>
RadioVariants.astro
<form
  class="flex w-full flex-col items-start justify-start gap-2 p-6 text-zinc-950 dark:text-gray-50"
>
  <label
    class="mb-4 text-base after:ml-1 after:text-red-500 after:content-['*']"
    >Choose the color for your shirt</label
  >
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="radio"
      id="radio1"
      name="radio-group"
      value="red"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="radio1" class="block text-base">Red</label>
  </div>
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="radio"
      id="radio2"
      name="radio-group"
      value="blue"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="radio2" class="block text-base">Blue</label>
  </div>
  <div class="mb-4 flex flex-row items-center gap-4">
    <input
      type="radio"
      id="radio3"
      name="radio-group"
      value="green"
      class="h-5 w-5 border-gray-300 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400"
    />
    <label for="radio3" class="block text-base">Green</label>
  </div>
</form>

Form Buttons

A few buttons which have types assigned to them for reset and submit.

ButtonVariants.html
<form
  onsubmit="alert('Submit worked'); return false;"
  class="flex w-full flex-col items-start justify-start gap-4 p-6 text-base text-zinc-950 dark:text-gray-50"
>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="name6" class="after:ml-1 after:text-red-500 after:content-['*']"
      >Name</label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="text"
      id="name6"
      name="name"
      placeholder="Enter your name"
      required
    />
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label
      for="email4"
      class="after:ml-1 after:text-red-500 after:content-['*']">Email</label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="email"
      id="email4"
      name="email"
      placeholder="[email protected]"
      required
    />
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label
      for="password8"
      class="after:ml-1 after:text-red-500 after:content-['*']">Password</label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="password"
      id="password8"
      name="password"
      placeholder="•••••••••"
      required
    />
  </div>
  <div class="mt-6 flex flex-row gap-4">
    <button
      type="submit"
      class="text-md rounded-lg bg-indigo-800 px-4 py-2 font-semibold text-gray-50 hover:bg-indigo-700 disabled:pointer-events-none disabled:opacity-60"
      >Submit</button
    >
    <button
      type="reset"
      class="text-md rounded-lg border border-gray-400 bg-gray-100 px-4 py-2 font-semibold text-gray-950 hover:border-gray-500 hover:bg-white dark:border-zinc-700 dark:bg-zinc-950 dark:text-gray-50 dark:hover:border-zinc-500 dark:hover:bg-zinc-900"
      >Reset
    </button>
  </div>
</form>
ButtonVariants.astro
<form
  onsubmit="alert('Submit worked'); return false;"
  class="flex w-full flex-col items-start justify-start gap-4 p-6 text-base text-zinc-950 dark:text-gray-50"
>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label for="name6" class="after:ml-1 after:text-red-500 after:content-['*']"
      >Name</label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="text"
      id="name6"
      name="name"
      placeholder="Enter your name"
      required
    />
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label
      for="email4"
      class="after:ml-1 after:text-red-500 after:content-['*']">Email</label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="email"
      id="email4"
      name="email"
      placeholder="[email protected]"
      required
    />
  </div>
  <div class="flex w-full flex-col items-start gap-y-1">
    <label
      for="password8"
      class="after:ml-1 after:text-red-500 after:content-['*']">Password</label
    >
    <input
      class="w-96 rounded-md border border-gray-400 bg-gray-50 px-4 py-2 text-black placeholder:text-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:ring-opacity-25 focus:ring-offset-0 dark:border-gray-600 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
      type="password"
      id="password8"
      name="password"
      placeholder="•••••••••"
      required
    />
  </div>
  <div class="mt-6 flex flex-row gap-4">
    <button
      type="submit"
      class="text-md rounded-lg bg-indigo-800 px-4 py-2 font-semibold text-gray-50 hover:bg-indigo-700 disabled:pointer-events-none disabled:opacity-60"
      >Submit</button
    >
    <button
      type="reset"
      class="text-md rounded-lg border border-gray-400 bg-gray-100 px-4 py-2 font-semibold text-gray-950 hover:border-gray-500 hover:bg-white dark:border-zinc-700 dark:bg-zinc-950 dark:text-gray-50 dark:hover:border-zinc-500 dark:hover:bg-zinc-900"
      >Reset
    </button>
  </div>
</form>
Prev Dropdown Next Lists