Inputs

Inputs are necessary for user interaction with the website. Inputs are used to take information from the user, and then save the data to the server, accordingly.

Label Inputs

Label Input has a label present at the top of the input field. They can be customized to show error error-message, and change color accordingly.

Username*

Password* Wrong Password. Try again.

Copy

   <section class="input-section flex-col">
    <span class="font-sm">Username*</span>
    <input type="text" class="textfeild" />
  </section>
  <section class="input-section wrong-input flex-col">
    <span class="font-sm">Password*</span>
    <input type="text" class="textfeild" />
    <span class="font-sm">Wrong Password. Try again.</span>
  </section>
  

Radio button

Radio buttons allow the user to select one option from a set.

Checked

Unchecked

Disabled

Copy
 
 
      <section class="flex-row">
        <input type="radio" name="abc" checked="checked" class="choice" /><span
          class="font-sm"
          >Checked</span
        >
      </section>
      <section class="flex-row">
        <input type="radio" name="abc" class="choice" /><span class="font-sm"
          >Unchecked</span
        >
      </section>
      <section class="flex-row">
        <input type="radio" name="abc" class="disabled" /><span class="font-sm"
          >Disabled</span
        >
      </section>
      

Checkbox

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.

Checked

Unchecked

Disabled

Copy
 
 <section class="flex-row">
        <input
          type="checkbox"
          name="abc"
          checked="checked"
          class="choice"
        /><span class="font-sm">Checked</span>
      </section>
      <section class="flex-row">
        <input type="checkbox" name="abc" class="choice" /><span class="font-sm"
          >Unchecked</span
        >
      </section>
      <section class="flex-row">
        <input type="checkbox" name="abc" class="disabled" /><span
          class="font-sm"
          >Disabled</span
        >
      </section>
      

Text Area

The <textarea> tag defines a multi-line text input control.

Copy
 
 <textarea name=""id="" cols="50" rows="4" class="textarea" placeholder="Enter your address"></textarea>