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
<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="yG7zrglgNBKRNI65LJg68CAZXEpcxQE6CfOF68tc1pn05rSmNl1UxY5iUJfRt1jgx0fDgTm66f9lyiFqSWE-Bg" 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" data-testid="radio-field-language"><input type="hidden" name="language" value="" autocomplete="off" /> <div class="flex gap-1 items-start"> <input aria-describedby="language-english-description" data-testid="radio-language-english" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="english" checked="checked" name="language" id="language_english" /> <div class="flex flex-col gap-1"> <label for="language_english">English</label> <span id="language-english-description" class="text-secondary text-sm">Object #1</span> </div> </div> <div class="flex gap-1 items-start"> <input aria-describedby="language-portuguese-description" data-testid="radio-language-portuguese" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="portuguese" name="language" id="language_portuguese" /> <div class="flex flex-col gap-1"> <label for="language_portuguese">Portuguese</label> <span id="language-portuguese-description" class="text-secondary text-sm">Object #2</span> </div> </div> <div class="flex gap-1 items-start"> <input aria-describedby="language-spanish-description" data-testid="radio-language-spanish" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="spanish" name="language" id="language_spanish" /> <div class="flex flex-col gap-1"> <label for="language_spanish">Spanish</label> <span id="language-spanish-description" class="text-secondary text-sm">Object #3</span> </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="k3YMP2A8OuXqnQXb5nXmw0oFkkws9ea_nutfKTCUYo6v_ks3XwFaMvXL2_UbWoTTrVsNh0mKDnry0vuosqmKEQ" 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" data-testid="radio-field-language"><input type="hidden" name="language" value="" autocomplete="off" /> <div class="flex gap-1 items-start"> <input aria-describedby="language-english-description" data-testid="radio-language-english" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="english" checked="checked" name="language" id="language_english" /> <div class="flex flex-col gap-1"> <label for="language_english">English</label> <span id="language-english-description" class="text-secondary text-sm">Hash #1</span> </div> </div> <div class="flex gap-1 items-start"> <input aria-describedby="language-portuguese-description" data-testid="radio-language-portuguese" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="portuguese" name="language" id="language_portuguese" /> <div class="flex flex-col gap-1"> <label for="language_portuguese">Portuguese</label> <span id="language-portuguese-description" class="text-secondary text-sm">Hash #2</span> </div> </div> <div class="flex gap-1 items-start"> <input aria-describedby="language-spanish-description" data-testid="radio-language-spanish" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="spanish" name="language" id="language_spanish" /> <div class="flex flex-col gap-1"> <label for="language_spanish">Spanish</label> <span id="language-spanish-description" class="text-secondary text-sm">Hash #3</span> </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="Oe8of6vhlpT0iGeVK187qBVWY81a1TLbekej_j657dUFZ293lNz2Q-veubvWcFm48gj8Bj-q2h4Wfgd_vIQFSg" 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" data-testid="radio-field-language"><input type="hidden" name="fake_user[language]" value="" autocomplete="off" /> <div class="flex gap-1 items-start"> <input aria-describedby="language-english-description" data-testid="radio-language-english" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="english" name="fake_user[language]" id="fake_user_language_english" /> <div class="flex flex-col gap-1"> <label for="fake_user_language_english">English</label> <span id="language-english-description" class="text-secondary text-sm">Select for English dialogue.</span> </div> </div> <div class="flex gap-1 items-start"> <input aria-describedby="language-portuguese-description" data-testid="radio-language-portuguese" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="portuguese" name="fake_user[language]" id="fake_user_language_portuguese" /> <div class="flex flex-col gap-1"> <label for="fake_user_language_portuguese">Portuguese</label> <span id="language-portuguese-description" class="text-secondary text-sm">Go with this for Portuguese conversations.</span> </div> </div> <div class="flex gap-1 items-start"> <input aria-describedby="language-spanish-description" data-testid="radio-language-spanish" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="spanish" name="fake_user[language]" id="fake_user_language_spanish" /> <div class="flex flex-col gap-1"> <label for="fake_user_language_spanish">Spanish</label> <span id="language-spanish-description" class="text-secondary text-sm">Opt for Spanish interactions.</span> </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="_uT4NQ-h9JTn8AwakIak6OQRbpNCI0r7ysx0gcJPDxrCbL89MJyUQ_im0jRtqcb4A0_xWCdcoj6m9dAAQHLnhQ" 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" data-testid="radio-field-color"><input type="hidden" name="fake_car[color]" value="" autocomplete="off" /> <div class="flex gap-1 items-start"> <input aria="false" data-testid="radio-color-red" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="red" name="fake_car[color]" id="fake_car_color_red" /> <div class="self-center"><label for="fake_car_color_red">Red</label></div> </div> <div class="flex gap-1 items-start"> <input aria="false" data-testid="radio-color-green" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="green" name="fake_car[color]" id="fake_car_color_green" /> <div class="self-center"><label for="fake_car_color_green">Green</label></div> </div> <div class="flex gap-1 items-start"> <input aria="false" data-testid="radio-color-blue" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="blue" name="fake_car[color]" id="fake_car_color_blue" /> <div class="self-center"><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
<div class="space-y-5"> <%= anchor_form_with url: false do |form| %> <%= form.fieldset("Object options") do %> <%= form.collection_radio_buttons( :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_radio_buttons( :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_radio_buttons( :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_radio_buttons( :color, FakeCar::COLORS, :to_s, :titleize, ) %> <% end %> <% end %></div>No notes provided.
No params configured.