Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- Text -->
<input class="bg-neutral-secondary-medium border border-default-medium text-heading rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body px-3 py-2.5 text-sm" type="text" value="John" name="person[first_name]" id="person_first_name" />
<!-- Email -->
<input class="bg-neutral-secondary-medium border border-default-medium text-heading rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body px-3 py-2.5 text-sm" type="email" value="john.doe@company.com" name="person[email]" id="person_email" />
<!-- Password -->
<input class="bg-neutral-secondary-medium border border-default-medium text-heading rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body px-3 py-2.5 text-sm" type="password" name="person[password]" id="person_password" />
<!-- Number -->
<input class="bg-neutral-secondary-medium border border-default-medium text-heading rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body px-3 py-2.5 text-sm" type="number" value="1234" name="person[unique_visitors]" id="person_unique_visitors" />
<!-- Tel -->
<input class="bg-neutral-secondary-medium border border-default-medium text-heading rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body px-3 py-2.5 text-sm" type="tel" value="123-45-678" name="person[phone_number]" id="person_phone_number" />
<!-- Url -->
<input class="bg-neutral-secondary-medium border border-default-medium text-heading rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body px-3 py-2.5 text-sm" type="url" value="https://flowbite.com" name="person[website_url]" id="person_website_url" />
<!-- Text Area -->
<textarea class="block w-full text-heading bg-neutral-secondary-medium rounded-base border border-default-medium focus:ring-brand focus:border-brand shadow-xs placeholder:text-body px-3 py-2.5 text-sm" name="person[company]" id="person_company">
Flowbite</textarea>
<!-- File -->
<input class="block w-full text-heading border border-default-medium rounded-base cursor-pointer bg-neutral-secondary-medium focus:outline-none text-sm" type="file" name="person[avatar]" id="person_avatar" />
<!-- Check Box -->
<input name="person[confirmation]" type="hidden" value="0" autocomplete="off" /><input class="text-brand bg-neutral-secondary-medium border-default-medium rounded-sm focus:ring-brand focus:ring-2 w-4 h-4" type="checkbox" value="1" name="person[confirmation]" id="person_confirmation" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# Text
render(Flowbite::Input.new(attribute: :first_name, form: form))
# Email
render(Flowbite::Input::Email.new(attribute: :email, form: form))
# Password
render(Flowbite::Input::Password.new(attribute: :password, form: form))
# Number
render(Flowbite::Input::Number.new(attribute: :unique_visitors, form: form))
# Tel
render(Flowbite::Input::Phone.new(attribute: :phone_number, form: form))
# Url
render(Flowbite::Input::Url.new(attribute: :website_url, form: form))
# Text Area
render(Flowbite::Input::Textarea.new(attribute: :company, form: form))
# File
render(Flowbite::Input::File.new(attribute: :avatar, form: form))
# Check Box
render(Flowbite::Input::Checkbox.new(attribute: :confirmation, form: form))

Inputs come in various types such as text, email, password, number, URL, and phone number.

No params configured.