Form Elements

Input Fields

{/* <!-- Input Fields --> */}
<div className="rounded-[10px] border border-stroke bg-white shadow-1 dark:border-dark-3 dark:bg-gray-dark dark:shadow-card">
  <div className="border-b border-stroke px-6.5 py-4 dark:border-dark-3">
    <h3 className="font-medium text-dark dark:text-white">
      Input Fields
    </h3>
  </div>
  <div className="flex flex-col gap-5.5 p-6.5">
    <div>
      <label className="mb-3 block text-body-sm font-medium text-dark dark:text-white">
        Default Input
      </label>
      <input
        type="text"
        placeholder="Default Input"
        className="w-full rounded-[7px] border-[1.5px] border-stroke bg-transparent px-5.5 py-3 text-dark outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-gray-2 dark:border-dark-3 dark:bg-dark-2 dark:text-white dark:focus:border-primary"
      />
    </div>

    <div>
      <label className="mb-3 block text-body-sm font-medium text-dark dark:text-white">
        Active Input
      </label>
      <input
        type="text"
        placeholder="Active Input"
        className="w-full rounded-[7px] border-[1.5px] border-primary bg-transparent px-5 py-3 text-dark outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-gray-2 dark:bg-dark-2 dark:text-white"
      />
    </div>

    <div>
      <label className="mb-3 block text-body-sm font-medium text-dark dark:text-white">
        Disabled label
      </label>
      <input
        type="text"
        placeholder="Disabled label"
        disabled
        className="w-full rounded-[7px] border-[1.5px] border-stroke bg-transparent px-5 py-3 text-dark outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-gray-2 dark:border-dark-3 dark:bg-dark-2 dark:text-white dark:focus:border-primary dark:disabled:bg-dark"
      />
    </div>
  </div>
</div>

Toggle switch input

{/* <!-- Toggle switch input --> */}
<div className="rounded-[10px] border border-stroke bg-white shadow-1 dark:border-dark-3 dark:bg-gray-dark dark:shadow-card">
  <div className="border-b border-stroke px-6.5 py-4 dark:border-dark-3">
    <h3 className="font-medium text-dark dark:text-white">
      Toggle switch input
    </h3>
  </div>
  <div className="flex flex-col gap-5.5 p-6.5">
    <SwitcherOne />
    <SwitcherTwo />
    <SwitcherThree />
    <SwitcherFour />
  </div>
</div>

Time and date

{/* <!-- Time and date --> */}
<div className="rounded-[10px] border border-stroke bg-white shadow-1 dark:border-dark-3 dark:bg-gray-dark dark:shadow-card">
  <div className="border-b border-stroke px-6.5 py-4 dark:border-dark-3">
    <h3 className="font-medium text-dark dark:text-white">
      Time and date
    </h3>
  </div>
  <div className="flex flex-col gap-5.5 p-6.5">
    <DatePickerOne />
    <DatePickerTwo />
  </div>
</div>

File upload

{/* <!-- File upload --> */}
<div className="rounded-[10px] border border-stroke bg-white shadow-1 dark:border-dark-3 dark:bg-gray-dark dark:shadow-card">
  <div className="border-b border-stroke px-6.5 py-4 dark:border-dark-3">
    <h3 className="font-medium text-dark dark:text-white">
      File upload
    </h3>
  </div>
  <div className="flex flex-col gap-5.5 p-6.5">
    <div>
      <label className="mb-3 block text-body-sm font-medium text-dark dark:text-white">
        Attach file
      </label>
      <input
        type="file"
        className="w-full cursor-pointer rounded-[7px] border-[1.5px] border-stroke bg-transparent outline-none transition file:mr-5 file:border-collapse file:cursor-pointer file:border-0 file:border-r file:border-solid file:border-stroke file:bg-[#E2E8F0] file:px-6.5 file:py-[13px] file:text-body-sm file:font-medium file:text-dark-5 file:hover:bg-primary file:hover:bg-opacity-10 focus:border-primary active:border-primary disabled:cursor-default disabled:bg-dark dark:border-dark-3 dark:bg-dark-2 dark:file:border-dark-3 dark:file:bg-white/30 dark:file:text-white dark:focus:border-primary"
      />
    </div>

    <div>
      <label className="mb-3 block text-body-sm font-medium text-dark dark:text-white">
        Attach file
      </label>
      <input
        type="file"
        className="w-full cursor-pointer rounded-[7px] border-[1.5px] border-stroke px-3 py-[9px] outline-none transition file:mr-4 file:rounded file:border-[0.5px] file:border-stroke file:bg-stroke file:px-2.5 file:py-1 file:text-body-xs file:font-medium file:text-dark-5 focus:border-primary file:focus:border-primary active:border-primary disabled:cursor-default disabled:bg-dark dark:border-dark-3 dark:bg-dark-2 dark:file:border-dark-3 dark:file:bg-white/30 dark:file:text-white"
      />
    </div>
  </div>
</div>
</div>

Textarea Fields

{/* <!-- Textarea Fields --> */}
<div className="rounded-[10px] border border-stroke bg-white shadow-1 dark:border-dark-3 dark:bg-gray-dark dark:shadow-card">
  <div className="border-b border-stroke px-6.5 py-4 dark:border-dark-3">
    <h3 className="font-medium text-dark dark:text-white">
      Textarea Fields
    </h3>
  </div>
  <div className="flex flex-col gap-6 p-6.5">
    <div>
      <label className="mb-3 block text-body-sm font-medium text-dark dark:text-white">
        Default textarea
      </label>
      <textarea
        rows={6}
        placeholder="Default textarea"
        className="w-full rounded-[7px] border-[1.5px] border-stroke bg-transparent px-5.5 py-3 text-dark outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-gray-2 dark:border-dark-3 dark:bg-dark-2 dark:text-white dark:focus:border-primary"
      ></textarea>
    </div>

    <div>
      <label className="mb-3 block text-body-sm font-medium text-dark dark:text-white">
        Active textarea
      </label>
      <textarea
        rows={6}
        placeholder="Active textarea"
        className="w-full rounded-[7px] border-[1.5px] border-primary bg-transparent px-5 py-3 text-dark outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-gray-2 dark:bg-dark-2 dark:text-white"
      ></textarea>
    </div>

    <div>
      <label className="mb-3 block text-body-sm font-medium text-dark dark:text-white">
        Disabled textarea
      </label>
      <textarea
        rows={6}
        disabled
        placeholder="Disabled textarea"
        className="w-full rounded-[7px] border-[1.5px] border-stroke bg-transparent px-5 py-3 text-dark outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-gray-2 dark:border-dark-3 dark:bg-dark-2 dark:text-white dark:focus:border-primary dark:disabled:bg-dark"
      ></textarea>
    </div>
  </div>
</div>

Checkbox and radio

{/* <!-- Checkbox and radio --> */}
<div className="rounded-[10px] border border-stroke bg-white shadow-1 dark:border-dark-3 dark:bg-gray-dark dark:shadow-card">
  <div className="border-b border-stroke px-6.5 py-4 dark:border-dark-3">
    <h3 className="font-medium text-dark dark:text-white">
      Checkbox and radio
    </h3>
  </div>
  <div className="flex flex-col gap-5.5 p-6.5">
    <CheckboxOne />
    <CheckboxTwo />
    <CheckboxThree />
    <CheckboxFour />
    <CheckboxFive />
  </div>
</div>

Select input

{/* <!-- Select input --> */}
<div className="rounded-[10px] border border-stroke bg-white shadow-1 dark:border-dark-3 dark:bg-gray-dark dark:shadow-card">
  <div className="border-b border-stroke px-6.5 py-4 dark:border-dark-3">
    <h3 className="font-medium text-dark dark:text-white">
      Select input
    </h3>
  </div>
  <div className="flex flex-col gap-5.5 p-6.5">
    <SelectGroupTwo />
    <MultiSelect id="multiSelect" />
  </div>
</div>