Primer ViewComponents v0.35.2

Previews

No matching results.

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!-- With caption -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-text-area">
    Tell me about yourself
  </label>
  <div class="FormControl-input-wrap">
    <textarea aria-describedby="validation-7492b903-d45d-4461-a384-b862b978e045 caption-7492b903-d45d-4461-a384-b862b978e045" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area">
</textarea>
  </div>
  <div class="FormControl-inlineValidation" id="validation-7492b903-d45d-4461-a384-b862b978e045" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
  <span class="FormControl-caption" id="caption-7492b903-d45d-4461-a384-b862b978e045">With a caption</span>
</div>
<!-- Visually hidden label -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="sr-only FormControl-label" for="my-text-area">
    Tell me about yourself
  </label>
  <div class="FormControl-input-wrap">
    <textarea aria-describedby="validation-8ce2b210-b25b-43b4-a347-ec8df3c6f6f2" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area">
</textarea>
  </div>
  <div class="FormControl-inlineValidation" id="validation-8ce2b210-b25b-43b4-a347-ec8df3c6f6f2" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Full width -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-text-area">
    Tell me about yourself
  </label>
  <div class="FormControl-input-wrap">
    <textarea aria-describedby="validation-1c06446c-ce4c-464c-b75f-c7fafebf42c9" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area">
</textarea>
  </div>
  <div class="FormControl-inlineValidation" id="validation-1c06446c-ce4c-464c-b75f-c7fafebf42c9" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Not full width -->
<div class="FormControl">
  <label class="FormControl-label" for="my-text-area">
    Tell me about yourself
  </label>
  <div class="FormControl-input-wrap">
    <textarea aria-describedby="validation-8c1c3ca6-9363-49e0-86e4-a81ec43bc941" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area">
</textarea>
  </div>
  <div class="FormControl-inlineValidation" id="validation-8c1c3ca6-9363-49e0-86e4-a81ec43bc941" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Disabled -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-text-area">
    Tell me about yourself
  </label>
  <div class="FormControl-input-wrap">
    <textarea disabled="disabled" aria-describedby="validation-5caa8307-cdc5-4ce9-b6e3-e1ff5844db58" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area">
</textarea>
  </div>
  <div class="FormControl-inlineValidation" id="validation-5caa8307-cdc5-4ce9-b6e3-e1ff5844db58" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Invalid -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-text-area">
    Tell me about yourself
  </label>
  <div class="FormControl-input-wrap">
    <textarea invalid="true" aria-invalid="true" aria-describedby="validation-875a8015-600d-4bb0-ba80-90ba1afedfc9" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area">
</textarea>
  </div>
  <div class="FormControl-inlineValidation" id="validation-875a8015-600d-4bb0-ba80-90ba1afedfc9" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- With validation message -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-text-area">
    Tell me about yourself
  </label>
  <div class="FormControl-input-wrap">
    <textarea invalid="true" aria-invalid="true" aria-describedby="validation-94756747-512f-4251-8ec5-8787c6f0b323" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area">
</textarea>
  </div>
  <div class="FormControl-inlineValidation" id="validation-94756747-512f-4251-8ec5-8787c6f0b323">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span>An error occurred!</span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# With caption
render(Primer::Alpha::TextArea.new(caption: "With a caption", name: "my-text-area", label: "Tell me about yourself"))
# Visually hidden label
render(Primer::Alpha::TextArea.new(visually_hide_label: true, name: "my-text-area", label: "Tell me about yourself"))
# Full width
render(Primer::Alpha::TextArea.new(full_width: true, name: "my-text-area", label: "Tell me about yourself"))
# Not full width
render(Primer::Alpha::TextArea.new(full_width: false, name: "my-text-area", label: "Tell me about yourself"))
# Disabled
render(Primer::Alpha::TextArea.new(disabled: true, name: "my-text-area", label: "Tell me about yourself"))
# Invalid
render(Primer::Alpha::TextArea.new(invalid: true, name: "my-text-area", label: "Tell me about yourself"))
# With validation message
render(Primer::Alpha::TextArea.new(validation_message: "An error occurred!", name: "my-text-area", label: "Tell me about yourself"))

No notes provided.

No params configured.

No assets to display.