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
57
58
59
60
61
62
63
64
<!-- Disabled 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-fg-disabled rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs cursor-not-allowed placeholder:text-fg-disabled px-3 py-2.5 text-sm" disabled="disabled" type="text" value="John" name="person[first_name]" id="person_first_name" />
</div>
<!-- Disabled 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-fg-disabled rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs cursor-not-allowed placeholder:text-fg-disabled px-3 py-2.5 text-sm" disabled="disabled" type="email" value="john.doe@company.com" name="person[email]" id="person_email" />
</div>
<!-- Disabled 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-fg-disabled rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs cursor-not-allowed placeholder:text-fg-disabled px-3 py-2.5 text-sm" disabled="disabled" type="password" name="person[password]" id="person_password" />
</div>
<!-- Disabled 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-fg-disabled rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs cursor-not-allowed placeholder:text-fg-disabled px-3 py-2.5 text-sm" disabled="disabled" type="number" value="1234" name="person[unique_visitors]" id="person_unique_visitors" />
</div>
<!-- Disabled 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-fg-disabled rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs cursor-not-allowed placeholder:text-fg-disabled px-3 py-2.5 text-sm" disabled="disabled" type="tel" value="123-45-678" name="person[phone_number]" id="person_phone_number" />
</div>
<!-- Disabled 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-fg-disabled rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs cursor-not-allowed placeholder:text-fg-disabled px-3 py-2.5 text-sm" disabled="disabled" type="url" value="https://flowbite.com" name="person[website_url]" id="person_website_url" />
</div>
<!-- Disabled 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 bg-neutral-secondary-medium rounded-base border border-default-medium text-fg-disabled cursor-not-allowed shadow-xs placeholder:text-fg-disabled px-3 py-2.5 text-sm" disabled="disabled" name="person[company]" id="person_company">
Flowbite</textarea>
</div>
<!-- Disabled 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-fg-disabled border border-default-medium rounded-base cursor-not-allowed bg-neutral-secondary-medium text-sm" disabled="disabled" type="file" name="person[avatar]" id="person_avatar" />
</div>
<!-- Disabled Check Box -->
<div class="flex">
  <div class="flex items-center h-5"><input name="person[confirmation]" disabled="disabled" 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 cursor-not-allowed w-4 h-4" disabled="disabled" type="checkbox" value="1" name="person[confirmation]" id="person_confirmation" /></div>
  <div class="ms-2 text-sm">
    <label class="font-medium text-fg-disabled" for="person_confirmation">Confirmation</label>
  </div>
</div>
<!-- Disabled Checked Check Box -->
<div class="flex">
  <div class="flex items-center h-5"><input name="person[confirmation]" disabled="disabled" 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 cursor-not-allowed w-4 h-4" disabled="disabled" type="checkbox" value="1" checked="checked" name="person[confirmation]" id="person_confirmation" /></div>
  <div class="ms-2 text-sm">
    <label class="font-medium text-fg-disabled" 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
27
28
29
30
# Disabled Text
render(Flowbite::InputField::Text.new(attribute: :first_name, form: form, disabled: true))
# Disabled Email
render(Flowbite::InputField::Email.new(attribute: :email, form: form, disabled: true))
# Disabled Password
render(Flowbite::InputField::Password.new(attribute: :password, form: form, disabled: true))
# Disabled Number
render(Flowbite::InputField::Number.new(attribute: :unique_visitors, form: form, disabled: true))
# Disabled Tel
render(Flowbite::InputField::Phone.new(attribute: :phone_number, form: form, disabled: true))
# Disabled Url
render(Flowbite::InputField::Url.new(attribute: :website_url, form: form, disabled: true))
# Disabled Text Area
render(Flowbite::InputField::Textarea.new(attribute: :company, form: form, disabled: true))
# Disabled File
render(Flowbite::InputField::File.new(attribute: :avatar, form: form, disabled: true))
# Disabled Check Box
render(Flowbite::InputField::Checkbox.new(attribute: :confirmation, form: form, disabled: true))
# Disabled Checked Check Box
person.confirmation = true
render(Flowbite::InputField::Checkbox.new(attribute: :confirmation, form: form, disabled: true))

No notes provided.

No params configured.