Login

Forms Elements

Components
Forms
Ex. 
<div className="row">
   <div className="col-md-6">
       <div className="mb-3">
           <label className="form-label">Your Name <span className="text-danger">*</span></label>
           <div className="form-icon position-relative">
              <FiUser className="fea icon-sm icons/">
              <input name="name" id="name" type="text" className="form-control ps-5" placeholder="First Name :">
           </div>
       </div>
   </div><!--end col-->
   <div className="col-md-6">
       <div className="mb-3">
           <label className="form-label">Your Email <span className="text-danger">*</span></label>
          <div className="form-icon position-relative">
              <FiMail className="fea icon-sm icons/">
              <input name="email" id="email" type="email" className="form-control ps-5" placeholder="Your email :">
          </div>
       </div> 
   </div><!--end col-->
   <div className="col-md-12">
       <div className="mb-3">
           <label className="form-label">Subject</label>
          <div className="form-icon position-relative">
              <FiBook className="fea icon-sm icons/">
              <input name="subject" id="subject" className="form-control ps-5" placeholder="Your subject :">
         </div>
       </div>
   </div><!--end col-->
   <div className="col-md-12">
       <div className="mb-3">
           <label className="form-label">Comments</label>
          <div className="form-icon position-relative">
              <FiMessageCircle className="fea icon-sm icons">
              <textarea name="comments" id="comments" rows="4" className="form-control ps-5" placeholder="Your Message :"></textarea>
         </div>
       </div>
   </div>
</div><!--end row-->
<div className="row">
     <div className="col-sm-12">
         <input type="submit" id="submit" name="send" className="btn btn-primary" value="Send Message">
      </div><!--end col-->
</div><!--end row-->
Checkboxes
Ex.
<div className="form-check form-check-inline">
   <div className="mb-0">
      <div className="form-check">
        <input className="form-check-input" type="checkbox" defaultChecked value="" id="flexCheckDefault1">
        <label className="form-check-label" htmlFor="flexCheckDefault1">One</label>
      </div>
   </div>
</div>

<div className="form-check form-check-inline">
   <div className="mb-0">
      <div className="form-check">
        <input className="form-check-input" type="checkbox" value="" id="flexCheckDefault2">
        <label className="form-check-label" htmlFor="flexCheckDefault2">Two</label>
      </div>
   </div>
</div>

<div className="form-check form-check-inline">
   <div className="mb-0">
      <div className="form-check">
        <input className="form-check-input" type="checkbox" disabled value="" id="flexCheckDefault3">
        <label className="form-check-label" htmlFor="flexCheckDefault3">Disabled</label>
      </div>
   </div>
</div>
Radio Buttons
Ex.
<div className="custom-control custom-radio custom-control-inline">
   <div className="form-check mb-0">
      <input className="form-check-input" defaultChecked type="radio" name="flexRadioDefault" id="flexRadioDefault1">
      <label className="form-check-label" htmlFor="flexRadioDefault1">Yes</label>
   </div>
</div>
 
<div className="custom-control custom-radio custom-control-inline">
   <div className="form-check mb-0">
      <input className="form-check-input" defaultChecked type="radio" name="flexRadioDefault" id="flexRadioDefault2">
      <label className="form-check-label" htmlFor="flexRadioDefault2">No</label>
   </div>
</div>

<div className="custom-control custom-radio custom-control-inline">
   <div className="form-check mb-0">
      <input className="form-check-input" defaultChecked type="radio" disabled name="flexRadioDefault" id="flexRadioDefault3">
      <label className="form-check-label" htmlFor="flexRadioDefault3">Disabled</label>
   </div>
</div>
Switches Button
Ex.
<div className="form-check form-switch">
   <input className="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
   <label className="form-check-label" htmlFor="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

<div className="form-check form-switch">
   <input className="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
   <label className="form-check-label" htmlFor="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

<div className="form-check form-switch">
   <input className="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
   <label className="form-check-label" htmlFor="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>

<div className="form-check form-switch">
   <input className="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" defaultChecked disabled>
   <label className="form-check-label" htmlFor="flexSwitchCheckCheckedDisabled">Disabled defaultChecked switch checkbox input</label>
</div>

Form Select Box
Ex.
<select className="form-select form-control" aria-label="Default select example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>
Subscribe Form
Ex. 
<div className="subcribe-form">
   <form>
      <input name="email" id="email2" type="email" className="form-control rounded-pill shadow" placeholder="Your email :" required>
      <button type="submit" className="btn btn-pills btn-primary">Subscribe</button>
   </form><!--end form-->
</div>