YNEX - Blazor Server Tailwind Css Admin Dashboard Template

Input Types

Basic Input:

Form Input With Label

Form Input With Placeholder

Type Text

Type Number

Type Password

Type Email

Type Tel

Type Date

Type Week

Type Month

Type Time

Type datetime-local

Type Search

Type Submit

Type Reset

Type Button

Type Color

Type Checkbox

Type Radio

Type Url

Type Disabled

Input Readonly Text

Disabled Readonly Input

Type Readonly Input

Textarea

Datalist example


  
    <div class="grid grid-cols-12 sm:gap-6">
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <p class="mb-2 text-muted">Basic Input:</p>
        <input type="text" class="form-control" id="input">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-label" class="form-label">Form Input With Label</label>
        <input type="text" class="form-control" id="input-label">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-placeholder" class="form-label">Form Input With Placeholder</label>
        <input type="text" class="form-control" id="input-placeholder" placeholder="Placeholder">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-text" class="form-label">Type Text</label>
        <input type="text" class="form-control" id="input-text" placeholder="Text">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-number" class="form-label">Type Number</label>
        <input type="number" class="form-control" id="input-number" placeholder="Number">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-password" class="form-label">Type Password</label>
        <input type="password" class="form-control" id="input-password" placeholder="Password">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-email" class="form-label">Type Email</label>
        <input type="email" class="form-control" id="input-email" placeholder="Email@xyz.com">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-tel" class="form-label">Type Tel</label>
        <input type="tel" class="form-control" id="input-tel" placeholder="+1100-2031-1233">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-date" class="form-label">Type Date</label>
        <input type="date" class="form-control" id="input-date">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-week" class="form-label">Type Week</label>
        <input type="week" class="form-control" id="input-week">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-month" class="form-label">Type Month</label>
        <input type="month" class="form-control" id="input-month">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-time" class="form-label">Type Time</label>
        <input type="time" class="form-control" id="input-time">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-datetime-local" class="form-label">Type datetime-local</label>
        <input type="datetime-local" class="form-control" id="input-datetime-local">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-search" class="form-label">Type Search</label>
        <input type="search" class="form-control" id="input-search" placeholder="Search">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-submit" class="form-label">Type Submit</label>
        <input type="submit" class="form-control ti-btn" id="input-submit" value="Submit">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-reset" class="form-label">Type Reset</label>
        <input type="reset" class="form-control ti-btn" id="input-reset">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-button" class="form-label">Type Button</label>
        <input type="button" class="form-control ti-btn !text-white !bg-primary" id="input-button"  value="Button">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <div class="grid grid-cols-12 gap-6">
            <div class="xl:col-span-3 col-span-12 flex flex-col ">
                <label class="form-label">Type Color</label>
                <input class="form-control form-input-color !rounded-md" type="color" value="#136bd0">
            </div>
            <div class="xl:col-span-5 col-span-12">
                <div class="form-check">
                    <p class="mb-3 px-0 text-muted">Type Checkbox</p>
                    <input class="form-check-input ms-2" type="checkbox" value="" checked>
                </div>
            </div>
            <div class="xl:col-span-4 col-span-12">
                <div class="form-check">
                    <p class="mb-4 px-0 text-muted">Type Radio</p>
                    <input class="form-check-input ms-2" type="radio" checked>
                </div>
            </div>
        </div>
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <div>
            <label for="file-input" class="sr-only">Type file</label>
            <input type="file" name="file-input" id="file-input" class="block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 rounded-sm text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10
            file:bg-transparent file:border-0
            file:bg-gray-200 file:me-4
            file:py-3 file:px-4
            dark:file:bg-black/20 dark:file:text-white/50">
          </div>
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label class="form-label">Type Url</label>
        <input class="form-control" type="url"  name="website" placeholder="http://example.com">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-disabled" class="form-label">Type Disabled</label>
        <input type="text" id="input-disabled" class="form-control" placeholder="Disabled input" disabled>
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-readonlytext" class="form-label">Input Readonly Text</label>
        <input type="text" readonly class="form-control-plaintext" id="input-readonlytext" value="email@example.com">
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="disabled-readonlytext" class="form-label">Disabled Readonly Input</label>
        <input class="form-control" type="text" value="Disabled readonly input" id="disabled-readonlytext" aria-label="Disabled input example" disabled readonly>
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label class="form-label">Type Readonly Input</label>
        <input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="text-area" class="form-label">Textarea</label>
        <textarea class="form-control" id="text-area" rows="1"></textarea>
    </div>
    <div class="xl:col-span-4 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
        <label for="input-DataList" class="form-label">Datalist example</label>
        <input class="form-control" type="text" list="datalistOptions" id="input-DataList" placeholder="Type to search...">
        <datalist id="datalistOptions">
            <option value="San Francisco">
            </option>
            <option value="New York">
            </option>
            <option value="Seattle">
            </option>
            <option value="Los Angeles">
            </option>
            <option value="Chicago">
            </option>
        </datalist>
    </div>
</div>

Input shapes

Input With No Radius

Input With Radius

Rounded Input


    <div class="grid grid-cols-12 gap-y-3">
        <div class="xl:col-span-12 col-span-12">
            <label for="input-noradius" class="form-label">Input With No Radius</label>
            <input type="text" class="form-control !rounded-none" id="input-noradius" placeholder="No Radius">
        </div>
        <div class="xl:col-span-12 col-span-12">
            <label for="input-rounded" class="form-label">Input With Radius</label>
            <input type="text" class="form-control" id="input-rounded" placeholder="Default Radius">
        </div>
        <div class="xl:col-span-12 col-span-12">
            <label for="input-rounded-pill" class="form-label">Rounded Input</label>
            <input type="text" class="form-control !rounded-full" id="input-rounded-pill" placeholder="Rounded">
        </div>
    </div>

Input border Styles

Default

Dotted Input

Dashed Input


    <div class="grid grid-cols-12 gap-y-3">
        <div class="xl:col-span-12 col-span-12">
            <label for="input-rounded1" class="form-label">Default</label>
            <input type="text" class="form-control" id="input-rounded1" placeholder="Default">
        </div>
        <div class="xl:col-span-12 col-span-12">
            <label for="input-rounded2" class="form-label">Dotted Input</label>
            <input type="text" class="form-control border-dotted" id="input-rounded2" placeholder="Dotted">
        </div>
        <div class="xl:col-span-12 col-span-12">
            <label for="input-rounded3" class="form-label">Dashed Input</label>
            <input type="text" class="form-control border-dashed" id="input-rounded3" placeholder="Dashed">
        </div>
    </div>

Input Sizing

<input class="form-control form-control-sm mb-3" type="text"
    placeholder=".form-control-sm" aria-label=".form-control-sm example">
    <input class="form-control mb-3" type="text" placeholder="Default input"
        aria-label="default input example">
    <input class="form-control form-control-lg" type="text"
    placeholder=".form-control-lg" aria-label=".form-control-lg example">

Basic Inputs


<div class="max-w-sm space-y-3">
<input type="text" class="ti-form-input">
<textarea class="ti-form-input" rows="3"></textarea>
</div>

Inputs With Placeholder


<div class="max-w-sm space-y-3">
<input type="text" class="ti-form-input" placeholder="This is placeholder">
<textarea> class="ti-form-input" rows="2" placeholder="This is a textarea placeholder"></textarea>
<input type="text" class="ti-form-input" placeholder="Readonly input" readonly>
<textarea> class="py-3 px-4 ti-form-input" rows="2" placeholder="Readonly" readonly></textarea>
</div>

Disabled Inputs


<div class="max-w-sm space-y-3">
<input type="text" class="opacity-70 pointer-events-none ti-form-input" placeholder="Disabled input" disabled>
<input type="text" class="opacity-70 pointer-events-none ti-form-input" placeholder="Disabled readonly input" disabled readonly>
<textarea class="py-3 px-4 ti-form-input disabled:opacity-50 disabled:pointer-events-none" rows="2" placeholder="Disabled textarea" disabled></textarea>
<textarea class="py-3 px-4 ti-form-input disabled:opacity-50 disabled:pointer-events-none" rows="2" placeholder="Disabled readonly textarea" disabled readonly></textarea>
</div>

Gray Inputs


        <div class="relative">
<input type="email" class="peer py-3 px-4 ps-11 ti-form-input bg-gray-100 border-transparent disabled:opacity-50 disabled:pointer-events-none rounded dark:bg-bodybg2 dark:border-transparent" placeholder="Enter name">
<div class="absolute inset-y-0 start-0 flex items-center pointer-events-none ps-4 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
<svg class="flex-shrink-0 size-4 text-gray-500 dark:text-white/50" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
</div>

<div class="relative">
<input type="password" class="peer py-3 px-4 ps-11 ti-form-input bg-gray-100 border-transparent disabled:opacity-50 disabled:pointer-events-none rounded dark:bg-bodybg2 dark:border-transparent" placeholder="Enter password">
<div class="absolute inset-y-0 start-0 flex items-center pointer-events-none ps-4 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
<svg class="flex-shrink-0 size-4 text-gray-500 dark:text-white/50" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z"/><circle cx="16.5" cy="7.5" r=".5"/></svg>
</div>
</div>
<textarea> class="py-3 px-4 ti-form-input bg-gray-100 border-transparent disabled:opacity-50 disabled:pointer-events-none rounded dark:bg-bodybg2 dark:border-transparent" rows="3" placeholder="This is a textarea placeholder"></textarea>

Underline Inputs


<div class="relative">
<input type="email" class="peer py-3 pe-0 ps-8 ti-form-input rounded-none bg-transparent !border-t-transparent border-b !border-x-transparent border-b-gray-200 focus:!border-t-transparent focus:!border-x-transparent focus:!border-b-primary focus:!ring-0 focus:!ring-offset-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-white/10 dark:focus:!ring-transparent !shadow-none dark:focus:border-b-white/10" placeholder="Enter name">
<div class="absolute inset-y-0 start-0 flex items-center pointer-events-none ps-2 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
<svg class="flex-shrink-0 size-4 text-gray-500 dark:text-white/50" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
</div>

<div class="relative">
<input type="password" class="peer py-3 pe-0 ps-8 ti-form-input rounded-none bg-transparent !border-t-transparent border-b !border-x-transparent border-b-gray-200 focus:!border-t-transparent focus:!border-x-transparent focus:!border-b-primary focus:!ring-0 focus:!ring-offset-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-white/10 dark:focus:!ring-transparent !shadow-none dark:focus:border-b-white/10" placeholder="Enter password">
<div class="absolute inset-y-0 start-0 flex items-center pointer-events-none ps-2 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
<svg class="flex-shrink-0 size-4 text-gray-500 dark:text-white/50" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z"/><circle cx="16.5" cy="7.5" r=".5"/></svg>
</div>
</div>
<textarea class="py-3 px-0 ti-form-input rounded-none bg-transparent !border-t-transparent border-b !border-x-transparent border-b-gray-200 text-sm focus:!border-t-transparent focus:!border-x-transparent  focus:!border-b-primary focus:!ring-0 focus:!ring-offset-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-white/10 dark:focus:!ring-transparent !shadow-none dark:focus:border-b-white/10" rows="3" placeholder="This is a textarea placeholder"></textarea>

Floating label

Password

Comment


                    <!-- Floating Input -->
<div class="relative">
<input type="email" id="hs-floating-input-email" class="peer p-4 ti-form-input placeholder:!text-transparent focus:!border-primary focus:!ring-primary disabled:opacity-50 disabled:pointer-events-none focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2" placeholder="you@email.com">
<label> for="hs-floating-input-email" class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
peer-focus:text-xs
peer-focus:-translate-y-1.5
peer-focus:text-gray-500 dark:peer-focus:text-white/70
peer-[:not(:placeholder-shown)]:text-xs
peer-[:not(:placeholder-shown)]:-translate-y-1.5
peer-[:not(:placeholder-shown)]:text-gray-500 dark:peer-[:not(:placeholder-shown)]:text-white/70">Email</label>
</div>
<!-- End Floating Input -->

<!-- Floating Input -->
<div class="relative">
<input type="password" id="hs-floating-input-passowrd" class="peer p-4 ti-form-input placeholder:!text-transparent focus:!border-primary focus:!ring-primary disabled:opacity-50 disabled:pointer-events-none
focus:pt-6
focus:pb-2
[&:not(:placeholder-shown)]:pt-6
[&:not(:placeholder-shown)]:pb-2
autofill:pt-6
autofill:pb-2" placeholder="********">
<label> for="hs-floating-input-passowrd" class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
peer-focus:text-xs
peer-focus:-translate-y-1.5
peer-focus:text-gray-500 dark:peer-focus:text-white/70
peer-[:not(:placeholder-shown)]:text-xs
peer-[:not(:placeholder-shown)]:-translate-y-1.5
peer-[:not(:placeholder-shown)]:text-gray-500 dark:peer-[:not(:placeholder-shown)]:text-white/70">Password</label>
</div>
<!-- End Floating Input -->

<!-- Floating Textarea -->
<div class="relative">
<textarea> id="hs-floating-textarea" class="peer p-4 ti-form-input placeholder:!text-transparent focus:!border-primary focus:!ring-primary disabled:opacity-50 disabled:pointer-events-non
focus:pt-6
focus:pb-2
[&:not(:placeholder-shown)]:pt-6
[&:not(:placeholder-shown)]:pb-2
autofill:pt-6
autofill:pb-2" placeholder="This is a textarea placeholder"></textarea>
<label> for="hs-floating-textarea" class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
peer-focus:text-xs
peer-focus:-translate-y-1.5
peer-focus:text-gray-500 dark:peer-focus:text-white/70
peer-[:not(:placeholder-shown)]:text-xs
peer-[:not(:placeholder-shown)]:-translate-y-1.5
peer-[:not(:placeholder-shown)]:text-gray-500 dark:peer-[:not(:placeholder-shown)]:text-white/70">Comment</label>
</div>
<!-- End Floating Textarea -->

Gray Floating label

Password

Comment


<!-- Floating Input -->
<div class="relative">
<input type="email" id="hs-floating-gray-input-email" class="peer p-4 ti-form-input bg-gray-100 border-transparent placeholder:!text-transparent focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg2 rounded-md dark:border-transparent
focus:pt-6
focus:pb-2
[&:not(:placeholder-shown)]:pt-6
[&:not(:placeholder-shown)]:pb-2
autofill:pt-6
autofill:pb-2" placeholder="you@email.com">
<label for="hs-floating-gray-input-email" class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
peer-focus:text-xs
peer-focus:-translate-y-1.5
peer-focus:text-gray-500 dark:peer-focus:text-white/70
peer-[:not(:placeholder-shown)]:text-xs
peer-[:not(:placeholder-shown)]:-translate-y-1.5
peer-[:not(:placeholder-shown)]:text-gray-500  dark:peer-[:not(:placeholder-shown)]:text-white/70">Email</label>
</div>
<!-- End Floating Input -->

<!-- Floating Input -->
<div class="relative">
<input type="password" id="hs-floating-gray-input-passowrd" class="peer p-4 ti-form-input bg-gray-100 border-transparent placeholder:!text-transparent focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg2 rounded-lg dark:border-transparent
focus:pt-6
focus:pb-2
[&:not(:placeholder-shown)]:pt-6
[&:not(:placeholder-shown)]:pb-2
autofill:pt-6
autofill:pb-2" placeholder="********">
<label for="hs-floating-gray-input-passowrd" class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
peer-focus:text-xs
peer-focus:-translate-y-1.5
peer-focus:text-gray-500  dark:peer-focus:text-white/70
peer-[:not(:placeholder-shown)]:text-xs
peer-[:not(:placeholder-shown)]:-translate-y-1.5
peer-[:not(:placeholder-shown)]:text-gray-500 dark:peer-[:not(:placeholder-shown)]:text-white/70">Password</label>
</div>
<!-- End Floating Input -->

<!-- Gray Floating Textarea -->
<div class="relative">
<textarea id="hs-floating-textarea-gray" class="peer p-4 ti-form-input bg-gray-100 border-transparent placeholder:!text-transparent focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg2 rounded-lg dark:border-transparent
focus:pt-6
focus:pb-2
[&:not(:placeholder-shown)]:pt-6
[&:not(:placeholder-shown)]:pb-2
autofill:pt-6
autofill:pb-2" placeholder="This is a textarea placeholder"></textarea>
<label for="hs-floating-textarea-gray" class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
peer-focus:text-xs
peer-focus:-translate-y-1.5
peer-focus:text-gray-500  dark:peer-focus:text-white/70
peer-[:not(:placeholder-shown)]:text-xs
peer-[:not(:placeholder-shown)]:-translate-y-1.5
peer-[:not(:placeholder-shown)]:text-gray-500  dark:peer-[:not(:placeholder-shown)]:text-white/70">Comment</label>
</div>
<!-- End Gray Floating Textarea -->

Underline Floating label

Password

Comment


<!-- Floating Input -->
<div class="relative">
    <input type="email" id="hs-floating-underline-input-email" class="peer py-4 px-0 ti-form-input rounded-none bg-transparent !border-t-transparent border-b !border-x-transparent border-b-gray-200 placeholder:!text-transparent focus:!border-t-transparent focus:!border-x-transparent focus:!border-b-primary focus:!ring-0 focus:!ring-offset-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-white/10 dark:focus:!ring-transparent !shadow-none dark:focus:border-b-white/10
    focus:pt-6
    focus:pb-2
    [&:not(:placeholder-shown)]:pt-6
    [&:not(:placeholder-shown)]:pb-2
    autofill:pt-6
    autofill:pb-2" placeholder="you@email.com">
    <label> for="hs-floating-underline-input-email" class="absolute top-0 start-0 py-4 px-0 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
    peer-focus:text-xs
    peer-focus:-translate-y-1.5
    peer-focus:text-gray-500  dark:peer-focus:text-white/70
    peer-[:not(:placeholder-shown)]:text-xs
    peer-[:not(:placeholder-shown)]:-translate-y-1.5
    peer-[:not(:placeholder-shown)]:text-gray-500 dark:peer-[:not(:placeholder-shown)]:text-white/70">Email</label>
</div>
<!-- End Floating Input -->

<!-- Floating Input -->
<div class="relative">
    <input type="password" id="hs-floating-underline-input-passowrd" class="peer py-4 px-0 ti-form-input rounded-none bg-transparent !border-t-transparent border-b !border-x-transparent border-b-gray-200 placeholder:!text-transparent focus:!border-t-transparent focus:!border-x-transparent focus:!border-b-primary focus:!ring-0 focus:!ring-offset-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-white/10 dark:focus:!ring-transparent !shadow-none dark:focus:border-b-white/10
    focus:pt-6
    focus:pb-2
    [&:not(:placeholder-shown)]:pt-6
    [&:not(:placeholder-shown)]:pb-2
    autofill:pt-6
    autofill:pb-2" placeholder="********">
    <label> for="hs-floating-underline-input-passowrd" class="absolute top-0 start-0 py-4 px-0 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
    peer-focus:text-xs
    peer-focus:-translate-y-1.5
    peer-focus:text-gray-500  dark:peer-focus:text-white/70
    peer-[:not(:placeholder-shown)]:text-xs
    peer-[:not(:placeholder-shown)]:-translate-y-1.5
    peer-[:not(:placeholder-shown)]:text-gray-500  dark:peer-[:not(:placeholder-shown)]:text-white/70">Password</label>
</div>
<!-- End Floating Input -->
<!-- Underline Floating Textarea -->
<div class="relative">
    <textarea> id="hs-floating-textarea-underline" class="peer py-4 px-0 ti-form-input rounded-none bg-transparent !border-t-transparent border-b !border-x-transparent border-b-gray-200 placeholder:!text-transparent focus:!border-t-transparent focus:!border-x-transparent focus:!border-b-primary focus:!ring-0 focus:!ring-offset-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-white/10 dark:focus:!ring-transparent !shadow-none dark:focus:border-b-white/10
    focus:pt-6
    focus:pb-2
    [&:not(:placeholder-shown)]:pt-6
    [&:not(:placeholder-shown)]:pb-2
    autofill:pt-6
    autofill:pb-2" placeholder="This is a textarea placeholder"></textarea>
    <label> for="hs-floating-textarea-underline" class="absolute top-0 start-0 py-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
    peer-focus:text-xs
    peer-focus:-translate-y-1.5
    peer-focus:text-gray-500  dark:peer-focus:text-white/70
    peer-[:not(:placeholder-shown)]:text-xs
    peer-[:not(:placeholder-shown)]:-translate-y-1.5
    peer-[:not(:placeholder-shown)]:text-gray-500  dark:peer-[:not(:placeholder-shown)]:text-white/70">Comment</label>
</div>
<!-- End Underline Floating Textarea -->

Pilled Inputs


<input type="text" class="ti-form-input px-5 rounded-full" placeholder="Input text">
<textarea class="ti-form-input px-5 rounded-md" rows="3" placeholder="This is a textarea placeholder"></textarea>

Input With Hidden Label


    <div class="">
<label> for="input-email-label" class="sr-only">Email</label>
<input type="email" id="input-email-label" class="ti-form-input" placeholder="you@site.com">
</div>
<div class="">
<label> for="textarea-email-label" class="sr-only">Comment</label>
<textarea> id="textarea-email-label" class="ti-form-input" rows="3" placeholder="Say hi..."></textarea>
</div>

Inputs With Label

Comment


    <div class="">
<label for="input-label" class="ti-form-label">Email</label>
<input type="email" id="input-label" class="ti-form-input" placeholder="you@site.com">
</div>
<div>
<label for="textarea-label" class="ti-form-label">Comment</label>
<textarea id="textarea-label" class="ti-form-input" rows="3" placeholder="Say hi..."></textarea>
</div>

Input With Helper text

We'll never share your details.

Leave your question

We'll get back to you soon.


        <div>
<label> for="input-label-with-helper-text" class="ti-form-label">Email</label>
<input type="email" id="input-label-with-helper-text" class="ti-form-input" placeholder="you@site.com" aria-describedby="hs-input-helper-text">
<p> class="text-xs text-gray-500 mt-2 dark:text-white/70" id="hs-input-helper-text">We'll never share your details.</p>
</div>
<div>
<label> for="textarea-label-with-helper-text" class="ti-form-label">Leave your question</label>
<textarea> id="textarea-label-with-helper-text" class="ti-form-input" rows="2" placeholder="Say hi, we'll be happy to chat with you." aria-describedby="hs-textarea-helper-text"></textarea>
<p> class="text-xs text-gray-500 mt-2 dark:text-white/70" id="hs-textarea-helper-text">We'll get back to you soon.</p>
</div>

Input With Inline helper text

We'll never share your details.

Leave your question

We'll get back to you soon.


                <div class="sm:inline-flex sm:items-center space-y-2 sm:space-y-0 sm:space-x-3 w-full rtl:space-x-reverse">
<label for="inline-input-label-with-helper-text" class="ti-form-label">Email</label>
<input type="email" id="inline-input-label-with-helper-text" class="ti-form-input" placeholder="you@site.com" aria-describedby="hs-inline-input-helper-text">
<p class="text-xs text-gray-500 mt-2 dark:text-white/70" id="hs-inline-input-helper-text">We'll never share your details.</p>
</div>
<div class="sm:inline-flex sm:items-center space-y-2 sm:space-y-0 sm:space-x-3 w-full rtl:space-x-reverse">
<label for="inline-textarea-label-with-helper-text" class="ti-form-label">Leave your question</label>
<textarea id="inline-textarea-label-with-helper-text" class="ti-form-input" rows="3" placeholder="Say hi, we'll be happy to chat with you." aria-describedby="hs-textarea-helper-text"></textarea>
<p class="text-xs text-gray-500 mt-2 dark:text-white/70" id="hs-inline-textarea-helper-text">We'll get back to you soon.</p>
</div>

Input With Corner Hint

Email Optional


                    <div>
<div class="flex justify-between items-center">
<label> for="with-corner-hint" class="ti-form-label">Email</label>
<span> class="block text-xs text-gray-500 mb-2 dark:text-white/70">Optional</span>
</div>
<input type="email" id="with-corner-hint" class="ti-form-input" placeholder="you@site.com">
</div>
<div>
<div class="flex justify-between items-center">
<label> for="hs-textarea-with-corner-hint" class="ti-form-label">Contact us</label>
<span> class="block text-xs text-gray-500 mb-2 dark:text-white/70">100 characters</span>
</div>
<textarea> id="hs-textarea-with-corner-hint" class="ti-form-input" rows="3" placeholder="Say hi..."></textarea>
</div>

Input Validation states

Please enter a valid email address.

Looks good!


                                    <div class="space-y-3">
    <div>
        <label for="hs-validation-name-error" class="ti-form-label">Email</label>
        <div class="relative">
          <input type="text" id="hs-validation-name-error" name="hs-validation-name-error" class="ti-form-input !border-danger focus:border-danger focus:ring-danger" required aria-describedby="hs-validation-name-error-helper">
          <div class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
            <svg class="h-5 w-5 text-danger" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
            </svg>
          </div>
        </div>
        <p class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">Please enter a valid email address.</p>
      </div>

      <div>
        <label for="hs-validation-name-success" class="ti-form-label">Email</label>
        <div class="relative">
          <input type="text" id="hs-validation-name-success" name="hs-validation-name-success" class="ti-form-input !border-success focus:border-success focus:ring-success" required aria-describedby="hs-validation-name-success-helper">
          <div class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
            <svg class="h-5 w-5 text-success" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
            </svg>
          </div>
        </div>
        <p class="text-sm text-green-600 mt-2" id="hs-validation-name-success-helper">Looks good!</p>
      </div>
</div>

Input Sizes


<div> class="space-y-3">
<input type="text" class="py-2 px-3 ti-form-input" placeholder="Small size">
<input type="text" class="ti-form-input" placeholder="Default size">
<input type="text" class="ti-form-input sm:p-5" placeholder="Large size">
</div>

Textarea Sizes


<div class="space-y-3">
<textarea class="py-2 px-3 ti-form-input" rows="2" placeholder="Small size"></textarea>
<textarea class="py-3 px-4 ti-form-input" rows="2" placeholder="Default size"></textarea>
<textarea class="sm:p-5 py-3 px-4 ti-form-input" rows="2" placeholder="Large size"></textarea>
</div>

Textarea examples


<!-- Textarea -->
<div class="relative">
    <textarea> id="hs-textarea-ex-1" class="p-4 pb-12 ti-form-input focus:!ring-primary" placeholder="Ask me anything..."></textarea>
    <!-- Toolbar -->
    <div class="absolute bottom-px inset-x-px p-2 rounded-b-md bg-white dark:bg-bodybg">
        <div class="flex justify-between items-center">
            <!-- Button Group -->
            <div class="flex items-center">
            <!-- Mic Button -->
            <button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-lg text-gray-500 dark:text-white/70 hover:text-primary focus:z-10 focus:outline-none focus:ring-0 shadow-none focus:ring-primary dark:hover:text-primary dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-600">
                <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect> width="18" height="18" x="3" y="3" rx="2"></rect><line> x1="9" x2="15" y1="15" y2="9"></line></svg>
            </button>
            <!-- End Mic Button -->

            <!-- Attach Button -->
            <button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-lg text-gray-500 dark:text-white/70 hover:text-primary focus:z-10 focus:outline-none focus:ring-0 shadow-none focus:ring-primary dark:hover:text-primary dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-600">
                <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path> d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
            </button>
            <!-- End Attach Button -->
            </div>
            <!-- End Button Group -->

            <!-- Button Group -->
            <div class="flex items-center gap-x-1">
            <!-- Mic Button -->
            <button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-lg text-gray-500 dark:text-white/70 hover:text-primary focus:z-10 focus:outline-none focus:ring-0 shadow-none focus:ring-primary dark:hover:text-primary dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-600">
                <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path> d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path> d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line> x1="12" x2="12" y1="19" y2="22"></line></svg>
            </button>
            <!-- End Mic Button -->

            <!-- Send Button -->
            <button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-sm text-white bg-primary hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 shadow-none focus:ring-primary dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-600">
                <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path> d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"></path>
                </svg>
            </button>
            <!-- End Send Button -->
            </div>
            <!-- End Button Group -->
        </div>
    </div>
    <!-- End Toolbar -->
</div>
<!-- End Textarea -->
<!-- Textarea -->
<div class="relative">
    <textarea> id="hs-textarea-ex-2" class="p-4 pb-12 ti-form-input focus:!ring-primary bg-gray-100 dark:bg-bodybg" placeholder="Ask me anything..."></textarea>

    <!-- Toolbar -->
    <div class="absolute bottom-px inset-x-px p-2 rounded-b-md bg-gray-100 dark:bg-bodybg">
        <div class="flex justify-between items-center">
            <!-- Button Group -->
            <div class="flex items-center">
            <!-- Mic Button -->
            <button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-lg text-gray-500 dark:text-white/70 hover:text-primary focus:z-10 focus:outline-none focus:ring-0 shadow-none focus:ring-primary dark:hover:text-primary dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-600">
                <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect> width="18" height="18" x="3" y="3" rx="2"></rect><line> x1="9" x2="15" y1="15" y2="9"></line></svg>
            </button>
            <!-- End Mic Button -->

            <!-- Attach Button -->
            <button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-lg text-gray-500 dark:text-white/70 hover:text-primary focus:z-10 focus:outline-none focus:ring-0 shadow-none focus:ring-primary dark:hover:text-primary dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-600">
                <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path> d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
            </button>
            <!-- End Attach Button -->
            </div>
            <!-- End Button Group -->

            <!-- Button Group -->
            <div class="flex items-center gap-x-1">
            <!-- Mic Button -->
            <button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-lg text-gray-500 dark:text-white/70 hover:text-primary focus:z-10 focus:outline-none focus:ring-0 shadow-none focus:ring-primary dark:hover:text-primary dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-600">
                <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path> d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path> d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line> x1="12" x2="12" y1="19" y2="22"></line></svg>
            </button>
            <!-- End Mic Button -->

            <!-- Send Button -->
            <button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-sm text-white bg-primary hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 shadow-none focus:ring-primary dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-600">
                <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path> d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"></path>
                </svg>
            </button>
            <!-- End Send Button -->
            </div>
            <!-- End Button Group -->
        </div>
    </div>
    <!-- End Toolbar -->
</div>
<!-- End Textarea -->

Autoheight


<label for="hs-autoheight-textarea" class="ti-form-label">Contact us</label>
<textarea id="hs-autoheight-textarea" class="ti-form-input" rows="3" placeholder="Say hi..."></textarea>

Overview

Email address

We'll never share your email with anyone else.

Password

Check me out


    <form>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email
                address</label>
            <input type="email" class="form-control" id="exampleInputEmail1"
                aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">We'll
                never share your email
                with
                anyone else.</div>
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="mb-3 form-check !ps-0">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label ps-2" for="exampleCheck1">Check
                me out</label>
        </div>
        <button type="submit" class="ti-btn ti-btn-primary-full">Submit</button>
    </form>

Form text

Password

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

<label for="inputPassword5" class="form-label">Password</label>
    <input type="password" id="inputPassword5" class="form-control"
        aria-describedby="passwordHelpBlock">
    <div id="passwordHelpBlock" class="form-text">
        Your password must be 8-20 characters long, contain letters and
        numbers,
        and
        must not contain spaces, special characters, or emoji.
    </div>

Inline text can use any typical inline HTML element with nothing more than the .form-text class.

Password

Must be 8-20 characters long.


    <div class="sm:grid grid-cols-12 gap-4 items-center">
        <div class="xxl:col-span-1 col-span-2">
            <label for="inputPassword6" class="col-form-label">Password</label>
        </div>
        <div class="col-span-3">
            <input type="password" id="inputPassword6" class="form-control"
                aria-describedby="passwordHelpInline">
        </div>
        <div class="col-span-7">
            <span id="passwordHelpInline" class="form-text">
                Must be 8-20 characters long.
            </span>
        </div>
    </div>

Disabled forms

Disabled fieldset example

Disabled input

Disabled select menu

Can't check this


    <form>
        <fieldset disabled>
            <legend class="text-2xl">Disabled fieldset example</legend>
            <div class="mb-3">
                <label for="disabledTextInput" class="form-label">Disabled
                    input</label>
                <input type="text" id="disabledTextInput" class="form-control"
                    placeholder="Disabled input">
            </div>
            <div class="mb-3">
                <label for="disabledSelect" class="form-label">Disabled select
                    menu</label>
                <select id="disabledSelect" class="form-select">
                    <option>Disabled select</option>
                </select>
            </div>
            <div class="mb-3">
                <div class="form-check !ps-0">
                    <input class="form-check-input" type="checkbox"
                        id="disabledFieldsetCheck" disabled>
                    <label class="form-check-label ps-2" for="disabledFieldsetCheck">
                        Can't check this
                    </label>
                </div>
            </div>
            <button type="submit" class="ti-btn ti-btn-primary-full opacity-[0.6]">Submit</button>
        </fieldset>
    </form>

Switcher

Inputs