Input

Inputs are used to receive input from the user. They are used in forms to gather information and validate it.

Inputs can be of different types based on their use case.

Below examples illustrate the different types of input fields.

Example of basic inputs

Below Given are 5 sample of basic inputs with different styles like basic, active, disabled, warning and error

Basic Input

This basic input is just blank input box style with a hovering effect to let the user know that its a input box!
there are total 4 types

Copy the code below and you're ready to go.

Active Inputs

This Active input is just input box style with border color and is used when the user selects the input or types-in.

Copy the code below and you're ready to go.

Disabled Inputs

The disabled input is just input box style with disabled input property and mostly used when user isnt allowed to to enter data/input.

Copy the code below and you're ready to go.

Invalid Inputs

The warning input is just input box style with invalid css property and mostly used when user inputs invalid data and also consider blank input invalid.

Copy the code below and you're ready to go.

Valid Inputs

The Valid input is just input box style with valid css property and mostly used when we want to confirm passwords or validate OTP.

Copy the code below and you're ready to go.

Check box and Radio Buttons

Check boxes or radio buttons are mostly types of input tag whic are mostly used in selecting from options.

Copy the code below and you're ready to go.

Radio buttons:
Checkbox buttons: