Playground

Text Input

A form input element that can be used to collect user input.

Tailwind Only

Copied!
<div class="w-full max-w-xs mx-auto">
    <input type="text" placeholder="Name" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" />
</div>

Data

Below you will find the data properties available in the x-data attribute of this element.


This particular element does not contain any data, It holds within it only TailwindCSS classes. Ah, but fear not! Should you so desire, you have the power to infuse it with some dynamic magic. Simply add the `x-data` attribute and create your desired functionality.


A project by DevDojo