Primer ViewComponents v0.38.0

Previews

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
# With caption
render(Primer::Alpha::TextField.new(caption: "With a caption", name: "my-text-field-1", label: "My text field"))
# Visually hidden label
render(Primer::Alpha::TextField.new(visually_hide_label: true, name: "my-text-field-2", label: "My text field"))
# Show clear button
render(Primer::Alpha::TextField.new(show_clear_button: true, name: "my-text-field-3", label: "My text field"))
# Full width
render(Primer::Alpha::TextField.new(full_width: true, name: "my-text-field-4", label: "My text field"))
# Not full width
render(Primer::Alpha::TextField.new(full_width: false, name: "my-text-field-5", label: "My text field"))
# Disabled
render(Primer::Alpha::TextField.new(disabled: true, name: "my-text-field-6", label: "My text field"))
# Invalid
render(Primer::Alpha::TextField.new(invalid: true, name: "my-text-field-7", label: "My text field"))
# With placeholder
render(Primer::Alpha::TextField.new(placeholder: "with a placeholder", name: "my-text-field-8", label: "My text field"))
# Inset
render(Primer::Alpha::TextField.new(inset: true, name: "my-text-field-9", label: "My text field"))
# Monospace
render(Primer::Alpha::TextField.new(monospace: true, name: "my-text-field-10", label: "My text field"))
# With trailing icon
render(Primer::Alpha::TextField.new(trailing_visual: { icon: { icon: :search } }, name: "my-text-field-11", label: "My text field"))
# With trailing text
render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "minute" } }, name: "my-text-field-12", label: "My text field"))
# With trailing long text
render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "Long trailing text" } }, name: "my-text-field-13", label: "My text field"))
# With trailing counter
render(Primer::Alpha::TextField.new(trailing_visual: { counter: { count: 5 } }, name: "my-text-field-14", label: "My text field"))
# With trailing label
render(Primer::Alpha::TextField.new(trailing_visual: { label: { text: "Hello" } }, name: "my-text-field-15", label: "My text field"))
# With leading visual
render(Primer::Alpha::TextField.new(leading_visual: { icon: :search, "aria-label": "Search" }, name: "my-text-field-16", label: "My text field"))
# With validation message
render(Primer::Alpha::TextField.new(validation_message: "An error occurred!", name: "my-text-field-17", label: "My text field"))