Form Elements
Last updated
Last updated
{/* <!-- 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 --> */}
<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 --> */}
<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 --> */}
<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 --> */}
<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 --> */}
<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 --> */}
<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>
