Basic example
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<label for="exampleFormControlInput1" class="form-label inline-block mb-2 text-gray-700"
>Example label</label
>
<input
type="text"
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleFormControlInput1"
placeholder="Example label"
/>
</div>
</div>
Sizing
<div class="flex justify-center">
<div>
<div class="mb-3 xl:w-96">
<label
for="exampleFormControlInput2"
class="form-label inline-block mb-2 text-gray-700 text-xl"
>Form control lg</label
>
<input
type="text"
class="
form-control
block
w-full
px-4
py-2
text-xl
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleFormControlInput2"
placeholder="Form control lg"
/>
</div>
<div class="mb-3 xl:w-96">
<label for="exampleFormControlInpu3" class="form-label inline-block mb-2 text-gray-700"
>Default input</label
>
<input
type="text"
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleFormControlInput3"
placeholder="Default input"
/>
</div>
<div class="mb-3 xl:w-96">
<label
for="exampleFormControlInput4"
class="form-label inline-block mb-2 text-gray-700 text-sm"
>Form control sm</label
>
<input
type="text"
class="
form-control
block
w-full
px-2
py-1
text-sm
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleFormControlInput4"
placeholder="Form control sm"
/>
</div>
</div>
</div>
Disabled
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<label for="exampleFormControlInput5" class="form-label inline-block mb-2 text-gray-700"
>Disabled input</label
>
<input
type="text"
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-gray-100 bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleFormControlInput5"
placeholder="Disabled input"
aria-label="Disabled input example"
disabled
/>
</div>
</div>
Readonly
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<label for="exampleFormControlInput5" class="form-label inline-block mb-2 text-gray-700"
>Disabled input</label
>
<input
type="text"
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-gray-100 bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleFormControlInput5"
value="Readonly input here..."
aria-label="readonly input example"
readonly
/>
</div>
</div>
Text
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<label for="exampleText0" class="form-label inline-block mb-2 text-gray-700"
>Text input</label
>
<input
type="text"
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleText0"
placeholder="Text input"
/>
</div>
</div>
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<label for="exampleEmail0" class="form-label inline-block mb-2 text-gray-700"
>Email input</label
>
<input
type="email"
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleEmail0"
placeholder="Email input"
/>
</div>
</div>
Password
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<label for="examplePassword0" class="form-label inline-block mb-2 text-gray-700"
>Password input</label
>
<input
type="password"
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="examplePassword0"
placeholder="Password input"
/>
</div>
</div>
Number
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<label for="exampleNumber0" class="form-label inline-block mb-2 text-gray-700"
>Number input</label
>
<input
type="number"
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleNumber0"
placeholder="Number input"
/>
</div>
</div>
Phone number
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<label for="exampleTel0" class="form-label inline-block mb-2 text-gray-700"
>Phone input</label
>
<input
type="tel"
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleTel0"
placeholder="Phone input"
/>
</div>
</div>
URL
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<label for="exampleURL0" class="form-label inline-block mb-2 text-gray-700"
>URL input</label
>
<input
type="url"
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleURL0"
placeholder="URL input"
/>
</div>
</div>
Textarea
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<label for="exampleFormControlTextarea1" class="form-label inline-block mb-2 text-gray-700"
>Example textarea</label
>
<textarea
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleFormControlTextarea1"
rows="3"
placeholder="Your message"
></textarea>
</div>
</div>
Helper text
Text helper
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<input
type="email"
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleEmail01"
placeholder="Input"
/>
<div class="text-sm text-gray-500 mt-1">Text helper</div>
</div>
</div>
Floating label
<div class="flex justify-center">
<div>
<div class="form-floating mb-3 xl:w-96">
<input type="email" class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput" class="text-gray-700">Email address</label>
</div>
<div class="form-floating mb-3 xl:w-96">
<input type="password" class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="floatingPassword" placeholder="Password">
<label for="floatingPassword" class="text-gray-700">Password</label>
</div>
</div>
</div>