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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!-- Text -->
<div class="">
  <label class="block mb-2.5 text-sm font-medium text-heading" for="person_first_name">First name</label>
  <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" />
</div>
<!-- Email -->
<div class="">
  <label class="block mb-2.5 text-sm font-medium text-heading" for="person_email">Email</label>
  <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" />
</div>
<!-- Password -->
<div class="">
  <label class="block mb-2.5 text-sm font-medium text-heading" for="person_password">Password</label>
  <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" />
</div>
<!-- Number -->
<div class="">
  <label class="block mb-2.5 text-sm font-medium text-heading" for="person_unique_visitors">Unique visitors</label>
  <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" />
</div>
<!-- Tel -->
<div class="">
  <label class="block mb-2.5 text-sm font-medium text-heading" for="person_phone_number">Phone number</label>
  <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" />
</div>
<!-- Url -->
<div class="">
  <label class="block mb-2.5 text-sm font-medium text-heading" for="person_website_url">Website url</label>
  <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" />
</div>
<!-- Text Area -->
<div class="">
  <label class="block mb-2.5 text-sm font-medium text-heading" for="person_company">Company</label>
  <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>
</div>
<!-- File -->
<div class="">
  <label class="block mb-2.5 text-sm font-medium text-heading" for="person_avatar">Avatar</label>
  <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" />
</div>
<!-- Check Box -->
<div class="flex">
  <div class="flex items-center h-5"><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" /></div>
  <div class="ms-2 text-sm">
    <label class="font-medium text-heading" for="person_confirmation">Confirmation</label>
  </div>
</div>
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::InputField::Text.new(attribute: :first_name, form: form))
# Email
render(Flowbite::InputField::Email.new(attribute: :email, form: form))
# Password
render(Flowbite::InputField::Password.new(attribute: :password, form: form))
# Number
render(Flowbite::InputField::Number.new(attribute: :unique_visitors, form: form))
# Tel
render(Flowbite::InputField::Phone.new(attribute: :phone_number, form: form))
# Url
render(Flowbite::InputField::Url.new(attribute: :website_url, form: form))
# Text Area
render(Flowbite::InputField::Textarea.new(attribute: :company, form: form))
# File
render(Flowbite::InputField::File.new(attribute: :avatar, form: form))
# Check Box
render(Flowbite::InputField::Checkbox.new(attribute: :confirmation, form: form))

Use this example as a generic form element which includes multiple input fields types such as text, email, password, number, URL, and phone number and use the grid layout to add multiple columns and rows.

No params configured.