Input

Overview

Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.

Basic

<label
  htmlFor="text"
  id="text-label"
  className="ml-4 mb-2 font-semibold"
>
  Text
</label>
<input
  placeholder="Talk Javascript to me"
  type="text"
  id="text"
  aria-label="text"
  aria-labelledby="text-label"
  className="p-4 border-2 rounded-2xl border-gray-200 dark:bg-gray-900 dark:border-gray-700"
/>

Description

<label htmlFor="text" id="text-label" className="ml-4 mb-1 font-semibold">
  Text
</label>
<div className="input-description ml-4 mb-2 text-sm">
  We'll use this to sell your soul
</div>
<input
  placeholder="Talk Javascript to me"
  type="text"
  id="text"
  aria-label="text"
  aria-labelledby="text-label"
  className="p-4 border-2 rounded-2xl border-gray-200 dark:bg-gray-900 dark:border-gray-700"
/>

Disabled

<label htmlFor="label" id="label-label" className="ml-4 mb-2 font-semibold">
  Label
</label>
<input
  placeholder="You are denied"
  type="text"
  id="label"
  aria-label="Label"
  aria-labelledby="label-label"
  className="p-4 border-2 rounded-2xl border-gray-200 dark:bg-gray-900 dark:border-gray-700"
  disabled
/>

Affix

<label
  htmlFor="username"
  id="username-label"
  className="ml-4 mb-2 font-semibold"
>
  Username
</label>
<div className="relative grid">
  <div className="absolute flex bg-gray-100 dark:bg-gray-800 border-2 border-gray-200 rounded-l-2xl">
    <span className="text-gray-500 dark:text-gray-400 p-4">@</span>
  </div>
  <input
    placeholder="burdenofdreams"
    type="text"
    name="username"
    id="username"
    aria-label="Username"
    aria-labelledby="username-label"
    className="py-4 pr-4 pl-16 flex border-2 rounded-2xl border-gray-200 dark:bg-gray-900 dark:border-gray-700"
  />
</div>

Error

<label htmlFor="co" id="co-label" className="ml-4 mb-2 font-semibold">
  Company
</label>
<input
  placeholder="TalkJS"
  type="text"
  id="co"
  aria-label="co"
  aria-labelledby="co-label"
  className="p-4 border-2 rounded-2xl border-gray-200 dark:bg-gray-900 dark:border-gray-700 required:border-red-500 dark:required:border-red-500"
  required
/>
<div className="text-red-500 ml-4 mt-2 text-sm id="error">
  We need to know the name of your company
</div>