300px
x
150px
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-e3f72bd9-1dbf-47f4-a195-03aa8a0e92b7 caption-e3f72bd9-1dbf-47f4-a195-03aa8a0e92b7" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area"></textarea> </div> <div class="FormControl-inlineValidation" id="validation-e3f72bd9-1dbf-47f4-a195-03aa8a0e92b7" 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-e3f72bd9-1dbf-47f4-a195-03aa8a0e92b7">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-6e773bf6-8035-4f60-84dc-04746ef84275" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area"></textarea> </div> <div class="FormControl-inlineValidation" id="validation-6e773bf6-8035-4f60-84dc-04746ef84275" 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-27a6b8c1-689c-415e-9d97-a054c9c40f68" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area"></textarea> </div> <div class="FormControl-inlineValidation" id="validation-27a6b8c1-689c-415e-9d97-a054c9c40f68" 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-5a8da69e-7d28-4eef-b74b-353e7033cf58" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area"></textarea> </div> <div class="FormControl-inlineValidation" id="validation-5a8da69e-7d28-4eef-b74b-353e7033cf58" 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-df3bbaa1-10bb-4ba7-8956-e0f58975c4aa" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area"></textarea> </div> <div class="FormControl-inlineValidation" id="validation-df3bbaa1-10bb-4ba7-8956-e0f58975c4aa" 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-f29d7f5f-489b-47e0-94f5-840b6682d2e6" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area"></textarea> </div> <div class="FormControl-inlineValidation" id="validation-f29d7f5f-489b-47e0-94f5-840b6682d2e6" 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-77d5174d-cc4f-49ae-99bc-19d1b09d0bfd" class="FormControl-input FormControl-textarea" name="my-text-area" id="my-text-area"></textarea> </div> <div class="FormControl-inlineValidation" id="validation-77d5174d-cc4f-49ae-99bc-19d1b09d0bfd"> <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 captionrender(Primer::Alpha::TextArea.new(caption: "With a caption", name: "my-text-area", label: "Tell me about yourself"))# Visually hidden labelrender(Primer::Alpha::TextArea.new(visually_hide_label: true, name: "my-text-area", label: "Tell me about yourself"))# Full widthrender(Primer::Alpha::TextArea.new(full_width: true, name: "my-text-area", label: "Tell me about yourself"))# Not full widthrender(Primer::Alpha::TextArea.new(full_width: false, name: "my-text-area", label: "Tell me about yourself"))# Disabledrender(Primer::Alpha::TextArea.new(disabled: true, name: "my-text-area", label: "Tell me about yourself"))# Invalidrender(Primer::Alpha::TextArea.new(invalid: true, name: "my-text-area", label: "Tell me about yourself"))# With validation messagerender(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.