Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Large Input -->
<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.5 py-3 text-base" type="text" value="John" name="person[first_name]" id="person_first_name" />
</div>
<!-- Default Input -->
<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>
<!-- Small Input -->
<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-2.5 py-2 text-sm" type="text" value="John" name="person[first_name]" id="person_first_name" />
</div>
1
2
3
4
5
6
7
8
# Large Input
render(Flowbite::InputField::Text.new(attribute: :first_name, form: form, size: :lg))
# Default Input
render(Flowbite::InputField::Text.new(attribute: :first_name, form: form, size: :default))
# Small Input
render(Flowbite::InputField::Text.new(attribute: :first_name, form: form, size: :sm))

Use the following examples to apply a small, default or large size for the input fields.

No params configured.