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
<%# Text Field %><%= text_field_tag "text_field", nil, class: "input" %><%# Email Field %><%= email_field_tag "email_field", nil, class: "input" %><%# Email Field With Multiple %><%= email_field_tag "email_field_with_multiple", nil, multiple: true, class: "input" %><%# Search Field %><%= search_field_tag "search_field", nil, class: "input" %><%# Integer Field %><%= number_field_tag "integer_field", nil, min: 0, max: 30, inputmode: :numeric, class: "input" %><%# Decimal Field %><%= number_field_tag "decimal_field", nil, step: "0.01", inputmode: :decimal, class: "input" %><%# Date Field %><%= date_field_tag "date_field", nil, class: "input" %><%# Datetime Field %><%= datetime_field "datetime_field", nil, class: "input" %><%# Time Field %><%= time_field "time_field", nil, list: "predefined_times", class: "input" %><%= tag.datalist options_for_select(["12:00", "12:30", "14:00", "14:30", "15:00"]), id: "predefined_times" %><%# File Field %><%= file_field_tag "file_field", accept: "image/*", class: "input" %><%# File Field With Multiple %><%= file_field_tag "file_field_with_multiple", accept: "image/*", multiple: true, class: "input" %><%# Autocomplete Field %><%= text_field_tag "autocomplete_field", nil, list: "ice_cream_flavors", class: "input" %><%= tag.datalist options_for_select(["Chocolate", "Coconut", "Mint", "Strawberry", "Vanilla"]), id: "ice_cream_flavors" %><%# Color Field %><%= color_field_tag "color_field", nil, list: "predefined_colors", class: "input", style: "--input-block-size: 2.25rem" %><%= tag.datalist options_for_select(["#ede9fe", "#ddd6fe", "#c4b5fd", "#a78bfa", "#8b5cf6"]), id: "predefined_colors" %><%# Actor Field %><label class="input input--actor flex items-center gap"> <%= image_tag "search.svg", size: 16, aria: { hidden: true } %> <%= text_field_tag "actor_field", nil %></label><%# Disabled Field %><%= text_field_tag "disabled_field", nil, disabled: true, class: "input" %>