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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<form class="flex flex-col gap-4" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="irh7MrgaFIMtvI1YH0qFsjOJq7zOyukZNlKpzjM3_qeyaK9MpzEW7eTUw57FzoXX1RnCidWNr20dhqaCd5m1vQ" autocomplete="off" /> <div class="p-4 space-y-4"> <h3 class="text-xl font-semibold mb-4">Disabled Form Elements</h3> <div class="space-y-2"> <h4 class="font-semibold">Text Input - Disabled</h4> <label class="font-semibold text-base text-primary" data-testid="label-name" for="fake_user_name">Name</label> <div data-testid="form-field-input-name"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" disabled="disabled" data-testid="input-name" type="text" value="Jerry Seinfeld" name="fake_user[name]" id="fake_user_name" /></div> </div> <div class="space-y-2"> <h4 class="font-semibold">Email Input - Disabled</h4> <label class="font-semibold text-base text-primary" data-testid="label-email" for="fake_user_email">Email<span class="text-secondary font-normal italic"> (optional)</span></label> <div data-testid="form-field-input-email"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" disabled="disabled" data-testid="input-email" type="email" value="jerry@example.com" name="fake_user[email]" id="fake_user_email" /></div> </div> <div class="space-y-2"> <h4 class="font-semibold">Number Input - Disabled</h4> <label class="font-semibold text-base text-primary" data-testid="label-age" for="fake_user_age">Age<span class="text-secondary font-normal italic"> (optional)</span></label> <div data-testid="form-field-input-age"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" disabled="disabled" data-testid="input-age" type="number" value="65" name="fake_user[age]" id="fake_user_age" /></div> </div> <div class="space-y-2"> <h4 class="font-semibold">Phone Input - Disabled</h4> <label class="font-semibold text-base text-primary" data-testid="label-phone" for="fake_user_phone">Phone</label> <div data-testid="form-field-input-phone"> <div data-controller="phone-input"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" disabled="disabled" data-action="input->phone-input#update" data-phone-input-target="displayInput" type="tel" value="555-123-4567" name="fake_user[phone]" id="fake_user_phone" /><input hidden="hidden" data-phone-input-target="submitInput" type="tel" value="555-123-4567" name="fake_user[phone]" id="fake_user_phone" /></div> </div> </div> <div class="space-y-2"> <h4 class="font-semibold">Search Input - Disabled</h4> <label class="font-semibold text-base text-primary" data-testid="label-search-term" for="fake_user_search_term">Search term<span class="text-secondary font-normal italic"> (optional)</span></label> <div data-testid="form-field-input-search-term"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" disabled="disabled" data-testid="input-search-term" type="search" value="comedy" name="fake_user[search_term]" id="fake_user_search_term" /></div> </div> <div class="space-y-2"> <h4 class="font-semibold">Time Input - Disabled</h4> <label class="font-semibold text-base text-primary" data-testid="label-appointment-time" for="fake_user_appointment_time">Appointment time<span class="text-secondary font-normal italic"> (optional)</span></label> <div data-testid="form-field-input-appointment-time"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" disabled="disabled" data-testid="input-appointment-time" value="13:30" type="time" name="fake_user[appointment_time]" id="fake_user_appointment_time" /></div> </div> <div class="space-y-2"> <h4 class="font-semibold">Select Dropdown - Disabled</h4> <label class="font-semibold text-base text-primary" data-testid="label-language" for="fake_user_language">Language<span class="text-secondary font-normal italic"> (optional)</span></label> <div class="relative"> <select class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" data-testid="select-language" disabled="disabled" name="fake_user[language]" id="fake_user_language"><option selected="selected" value="en">English</option> <option value="es">Spanish</option> <option value="fr">French</option></select> <!-- Source: Iconoir, added via `bin/add_icon` --> <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 absolute top-1/2 -translate-y-1/2 text-secondary pointer-events-none right-4" aria-hidden="true"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> </div> <div class="space-y-2"> <h4 class="font-semibold">Text Area - Disabled</h4> <label class="font-semibold text-base text-primary" data-testid="label-description" for="fake_user_description">Description<span class="text-secondary font-normal italic"> (optional)</span></label> <div> <textarea class="form-input min-h-[40px] resize-none block w-full rounded h-[120px] disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" data-testid="text-area-description" disabled="disabled" name="fake_user[description]" id="fake_user_description">Some description text</textarea> </div> </div> <div class="space-y-2"> <form class="flex flex-col gap-4" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="bZwzneAhoebKsdylcCL5F5WD9rShr_4jKYu5wD-ZdLtVTOfj_wqjiAPZkmOqpvlycxOfgbrouFcCX7aMezc_oQ" autocomplete="off" /> <fieldset><legend class="font-semibold text-base text-primary" data-testid="legend-some-checkboxes-disabled"> Some checkboxes disabled </legend> <div class="flex flex-col space-y-2 text-base"><input type="hidden" name="language[]" value="" autocomplete="off" /> <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center"> <input aria-describedby="language-english-description" data-testid="checkbox-language-english" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="english" checked="checked" name="language[]" id="language_english" /> <label class="col-start-2" for="language_english">English</label> <span id="language-english-description" class="text-secondary text-sm col-start-2">English</span> </div> <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center"> <input aria-describedby="language-portuguese-description" data-testid="checkbox-language-portuguese" disabled="disabled" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="portuguese" name="language[]" id="language_portuguese" /> <label class="col-start-2" for="language_portuguese">Portuguese</label> <span id="language-portuguese-description" class="text-secondary text-sm col-start-2">Português</span> </div> <div class="grid grid-cols-[max-content_auto] gap-x-2 items-center"> <input aria-describedby="language-spanish-description" data-testid="checkbox-language-spanish" disabled="disabled" class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" type="checkbox" value="spanish" name="language[]" id="language_spanish" /> <label class="col-start-2" for="language_spanish">Spanish</label> <span id="language-spanish-description" class="text-secondary text-sm col-start-2">Español</span> </div> </div> </fieldset> </form> </div> </div></form>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
65
66
67
68
69
70
71
<%= anchor_form_with model:, url: false do |form| %> <div class="p-4 space-y-4"> <h3 class="text-xl font-semibold mb-4">Disabled Form Elements</h3> <div class="space-y-2"> <h4 class="font-semibold">Text Input - Disabled</h4> <%= form.label :name %> <%= form.text_field :name, disabled: true %> </div> <div class="space-y-2"> <h4 class="font-semibold">Email Input - Disabled</h4> <%= form.label :email %> <%= form.email_field :email, disabled: true %> </div> <div class="space-y-2"> <h4 class="font-semibold">Number Input - Disabled</h4> <%= form.label :age %> <%= form.number_field :age, disabled: true %> </div> <div class="space-y-2"> <h4 class="font-semibold">Phone Input - Disabled</h4> <%= form.label :phone %> <%= form.phone_field :phone, disabled: true %> </div> <div class="space-y-2"> <h4 class="font-semibold">Search Input - Disabled</h4> <%= form.label :search_term %> <%= form.search_field :search_term, disabled: true %> </div> <div class="space-y-2"> <h4 class="font-semibold">Time Input - Disabled</h4> <%= form.label :appointment_time %> <%= form.time_field :appointment_time, disabled: true %> </div> <div class="space-y-2"> <h4 class="font-semibold">Select Dropdown - Disabled</h4> <%= form.label :language %> <%= form.select :language, [["English", "en"], ["Spanish", "es"], ["French", "fr"]], {}, { disabled: true } %> </div> <div class="space-y-2"> <h4 class="font-semibold">Text Area - Disabled</h4> <%= form.label :description %> <%= form.text_area :description, disabled: true %> </div> <div class="space-y-2"> <%= anchor_form_with url: false do |form| %> <%= form.fieldset("Some checkboxes disabled") do %> <%= form.collection_check_boxes( :language, [ { value: "english", text: "English", description: "English" }, { value: "portuguese", text: "Portuguese", description: "Português" }, { value: "spanish", text: "Spanish", description: "Español" }, ], ->(option) { option[:value] }, ->(option) { option[:text] }, { checked: "english", disabled: %w[spanish portuguese] } ) %> <% end %> <% end %> </div> </div><% end %>No notes provided.
No params configured.