Pages

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<div class="space-y-5">
<form class="flex flex-col gap-4" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="JspvQceHgvn2FctVo7NloOMp4YiuNNJKrcEJ7xzqMPRzX3cSNvRQ4HofYnppaavUa-PGKcAEcPNeilHCugiEVg" autocomplete="off" />
<fieldset><legend class="font-semibold text-base text-primary" data-testid="legend-object-options">
Object options
</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" 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">Object #1</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" 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" checked="checked" 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">Object #2</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" 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">Object #3</span>
</div>
</div>
</fieldset>
</form>
<form class="flex flex-col gap-4" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="G-PunsCY8txQDEXTMvWZrPf6REccIWAlEO43WAIhgRROdvbNMesgxdwG7Pz4L1fYfzBj5nIRwpzjpW91pMM1tg" autocomplete="off" />
<fieldset><legend class="font-semibold text-base text-primary" data-testid="legend-hash-options">
Hash options
</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" 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">Hash #1</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" 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" checked="checked" 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">Hash #2</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" 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">Hash #3</span>
</div>
</div>
</fieldset>
</form>
<form class="flex flex-col gap-4" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="orKLMhmpZuub-gcD9PXB8E_tI4RYXAmPtGDBaI33CtP3J5Nh6Nq08hfwriw-Lw-ExycEJTZsqzZHK5lFKxW-cQ" autocomplete="off" />
<fieldset><legend class="font-semibold text-base text-primary" data-testid="legend-translated-descriptions">
Translated descriptions
</legend>
<div class="flex flex-col space-y-2 text-base"><input type="hidden" name="fake_user[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" name="fake_user[language][]" id="fake_user_language_english" />
<label class="col-start-2" for="fake_user_language_english">English</label>
<span id="language-english-description" class="text-secondary text-sm col-start-2">Select for English dialogue.</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" 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="fake_user[language][]" id="fake_user_language_portuguese" />
<label class="col-start-2" for="fake_user_language_portuguese">Portuguese</label>
<span id="language-portuguese-description" class="text-secondary text-sm col-start-2">Go with this for Portuguese conversations.</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" 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="fake_user[language][]" id="fake_user_language_spanish" />
<label class="col-start-2" for="fake_user_language_spanish">Spanish</label>
<span id="language-spanish-description" class="text-secondary text-sm col-start-2">Opt for Spanish interactions.</span>
</div>
</div>
</fieldset>
</form>
<form class="flex flex-col gap-4" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="jYy0vfDWOu6ueJmMYCR3b6MR4ER2ymBsQ8vxtT_cbIvYGazuAaXo9yJyMKOq_rkbK9vH5Rj6wtWwgKmYmT7YKQ" autocomplete="off" />
<fieldset><legend class="font-semibold text-base text-primary" data-testid="legend-no-descriptions">
No descriptions
</legend>
<div class="flex flex-col space-y-2 text-base"><input type="hidden" name="fake_car[color][]" value="" autocomplete="off" />
<div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
<input aria="false" data-testid="checkbox-color-red" 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="red" checked="checked" name="fake_car[color][]" id="fake_car_color_red" />
<div class="col-start-2"><label for="fake_car_color_red">Red</label></div>
</div>
<div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
<input aria="false" data-testid="checkbox-color-green" 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="green" name="fake_car[color][]" id="fake_car_color_green" />
<div class="col-start-2"><label for="fake_car_color_green">Green</label></div>
</div>
<div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
<input aria="false" data-testid="checkbox-color-blue" 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="blue" name="fake_car[color][]" id="fake_car_color_blue" />
<div class="col-start-2"><label for="fake_car_color_blue">Blue</label></div>
</div>
</div>
</fieldset>
</form>
<form class="flex flex-col gap-4" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="6qR8ZBULEhVG3SxO2JbYOOnAorETJWrUG1IozMMNxqW_MWQ35HjADMrXhWESTBZMYQqFEH0VyG3oGXDhZe9yBw" autocomplete="off" />
<fieldset><legend class="font-semibold text-base text-primary" data-testid="legend-disabled">
Disabled
</legend>
<div class="flex flex-col space-y-2 text-base"><input type="hidden" name="fake_car[color][]" value="" autocomplete="off" />
<div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
<input aria="false" data-testid="checkbox-color-red" 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="red" name="fake_car[color][]" id="fake_car_color_red" />
<div class="col-start-2"><label for="fake_car_color_red">Red</label></div>
</div>
<div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
<input aria="false" data-testid="checkbox-color-green" 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="green" checked="checked" name="fake_car[color][]" id="fake_car_color_green" />
<div class="col-start-2"><label for="fake_car_color_green">Green</label></div>
</div>
<div class="grid grid-cols-[max-content_auto] gap-x-2 items-center">
<input aria="false" data-testid="checkbox-color-blue" 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="blue" name="fake_car[color][]" id="fake_car_color_blue" />
<div class="col-start-2"><label for="fake_car_color_blue">Blue</label></div>
</div>
</div>
</fieldset>
</form>
</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
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
<div class="space-y-5">
<%= anchor_form_with url: false do |form| %>
<%= form.fieldset("Object options") do %>
<%= form.collection_check_boxes(
:language,
object_options,
:value,
:text,
{ checked: FakeUser::LANGUAGES.sample }
) %>
<% end %>
<% end %>
<%= anchor_form_with url: false do |form| %>
<%= form.fieldset("Hash options") do %>
<%= form.collection_check_boxes(
:language,
hash_options,
->(option) { option[:value] },
->(option) { option[:text] },
{ checked: FakeUser::LANGUAGES.sample }
) %>
<% end %>
<% end %>
<%= anchor_form_with model:, url: false do |form| %>
<%= form.fieldset("Translated descriptions") do %>
<%= form.collection_check_boxes(
:language,
FakeUser::LANGUAGES,
:to_s,
:titleize,
) %>
<% end %>
<% end %>
<%= anchor_form_with model: FakeCar.new, url: false do |form| %>
<%= form.fieldset("No descriptions") do %>
<%= form.collection_check_boxes(
:color,
FakeCar::COLORS,
:to_s,
:titleize,
checked: FakeCar::COLORS.sample,
) %>
<% end %>
<% end %>
<%= anchor_form_with model: FakeCar.new, url: false do |form| %>
<%= form.fieldset("Disabled") do %>
<%= form.collection_check_boxes(
:color,
FakeCar::COLORS,
:to_s,
:titleize,
disabled: true,
checked: FakeCar::COLORS.sample,
) %>
<% end %>
<% end %>
</div>