x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- Small Select -->
<div class="">
<label class="block mb-2.5 text-sm font-medium text-heading" for="person_company">Company</label>
<select 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" name="person[company]" id="person_company"><option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option></select>
</div>
<!-- Default Select -->
<div class="">
<label class="block mb-2.5 text-sm font-medium text-heading" for="person_company">Company</label>
<select 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" name="person[company]" id="person_company"><option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option></select>
</div>
<!-- Large Select -->
<div class="">
<label class="block mb-2.5 text-sm font-medium text-heading" for="person_company">Company</label>
<select 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" name="person[company]" id="person_company"><option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option></select>
</div>
1
2
3
4
5
6
7
8
# Small Select
render(Flowbite::InputField::Select.new(attribute: :company, form: form, collection: ["Option 1", "Option 2", "Option 3"], size: :sm))
# Default Select
render(Flowbite::InputField::Select.new(attribute: :company, form: form, collection: ["Option 1", "Option 2", "Option 3"], size: :default))
# Large Select
render(Flowbite::InputField::Select.new(attribute: :company, form: form, collection: ["Option 1", "Option 2", "Option 3"], size: :lg))