Input Groups

The input element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

Your nameText field with helper text1/10

Variations

Basic Input

Copy as:HTMLReact

Basic Input Base Size:

Your name

copydone

Your nameText field with helper text1/10

copydone

Your nameText field with helper text1/10

copydone

Your passwordText field with helper text1/10

copydone

Your emailText field with helper text1/10

copydone

Your nameText field with helper text1/10

copydone

Your nameText field with helper text1/10copydone

copydone

Basic Input Large Size:

Your name

copydone

Your nameText field with helper text1/10

copydone

Your nameText field with helper text1/10

copydone

Your passwordText field with helper text1/10

copydone

Your emailText field with helper text1/10

copydone

Your nameText field with helper text1/10

copydone

Your nameText field with helper text1/10

copydone

<!-- Component: Plain basic input  -->
<div class="relative my-6">
  <input id="id-b02" type="text" name="id-b02" placeholder="your name" class="relative w-full h-10 px-4 text-sm placeholder-transparent transition-all border-b outline-none focus-visible:outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" />
  <label for="id-b02" class="cursor-text peer-focus:cursor-default peer-autofill:-top-2 absolute left-2 -top-2 z-[1] px-2 text-xs text-slate-400 transition-all before:absolute before:top-0 before:left-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-invalid:text-pink-500 peer-focus:-top-2 peer-focus:text-xs peer-focus:text-emerald-500 peer-invalid:peer-focus:text-pink-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent">
    Your name
  </label>
</div>
<!-- End Plain basic input  -->

Outline Input

Copy as:HTMLReact

Outlined Input Base Size:

Your name

copydone

Your nameText field with helper text1/10

copydone

Text fieldText field with helper text1/10

copydone

Your passwordText field with helper text1/10

copydone

Your emailText field with helper text1/10

copydone

Your nameText field with helper text1/10

copydone

Your nameText field with helper text1/10

copydone

Outlined Input Large Size:

Your name

copydone

Your nameText field with helper text1/10

copydone

Your nameText field with helper text1/10

copydone

Your passwordText field with helper text1/10

copydone

Your emailText field with helper text1/10

copydone

Your nameText field with helper text1/10

copydone

Your nameText field with helper text1/10

copydone

<!-- Component: Rounded basic input  -->
<div class="relative my-6">
  <input id="id-01" type="text" name="id-01" placeholder="your name" class="relative w-full h-10 px-4 text-sm placeholder-transparent transition-all border rounded outline-none focus-visible:outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" />
  <label for="id-01" class="cursor-text peer-focus:cursor-default peer-autofill:-top-2 absolute left-2 -top-2 z-[1] px-2 text-xs text-slate-400 transition-all before:absolute before:top-0 before:left-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-invalid:text-pink-500 peer-focus:-top-2 peer-focus:text-xs peer-focus:text-emerald-500 peer-invalid:peer-focus:text-pink-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent">
    Your name
  </label>
</div>
<!-- End Rounded basic input  -->

Usage

The <input> fields allow users to enter text into a UI. They typically appear in forms and dialogs.

Specs

Input fields come in two basic styles (base and outlined) and 2 sizes:

Base: text font size of 0.875rem (14px) and a label that scales from 0.875rem (14px) in font size, when the input is empty or 0.75rem (12px) when the label is floated. Helper text is also 0.75rem (12px) and a top and bottom margin of 1.5rem (24px) is used to house both the floating label and the helper text.
Large: text font size of 1rem (16px) and a label that scales from 1rem (16px) in font size, when the input is empty or 0.75rem (12px) when the label is floated. Helper text is also 0.75rem (12px) and a top and bottom margin of 1.5rem (24px) is used to house both the floating label and the helper text.

Accessibility notes

For better accessibility when using the <input> element:

An id attribute to allow the <input> to be associated with a <label> element for accessibility purposes.
A name attribute to set the name of the associated data point submitted to the server when the form is submitted.

Input Groups

Variations

Basic Input

Basic Input Base Size:

Basic Input Large Size:

Outline Input

Outlined Input Base Size:

Outlined Input Large Size:

Usage

Specs

Accessibility notes

Check out the latest release!