Form Textarea
Basic text area input field with 'floating' label
Sage Component
SageFormTextarea
<fieldset class="sage-type">
<h3 class="t-sage-heading-5">Default</h3>
<%= sage_component SageFormTextarea, {
id: "txtarea-example",
name: "txtarea-custom-name",
placeholder: "Your message",
label_text: "Your message",
disabled: false,
has_error: false,
} %>
<h3 class="t-sage-heading-5">Error</h3>
<%= sage_component SageFormTextarea, {
id: "txtarea-example-error",
placeholder: "Your message",
label_text: "Your message",
disabled: false,
has_error: true,
message_text: "Error message"
} %>
<h3 class="t-sage-heading-5">No label (placeholder only)</h3>
<%= sage_component SageFormTextarea, {
id: "txtarea-example-nolabel",
placeholder: "Your message",
disabled: false,
has_error: false,
} %>
<h3 class="t-sage-heading-5">Disabled</h3>
<%= sage_component SageFormTextarea, {
id: "txtarea-example-disabled",
placeholder: "Your message",
label_text: "Description",
disabled: true,
has_error: false,
content: "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
} %>
</fieldset>
Property | Description | Type | Default |
---|---|---|---|
|
Sets the content of the textarea. |
String |
|
|
Enabling this property adds the |
Boolean |
|
|
Enabling this property adds the |
Boolean |
|
|
Unique identifier for this input field. Should match the |
String |
|
|
Sets the label text for the component. |
String |
|
|
Sets the message text for the component. |
String |
|
|
Unique identifier for this component. Defaults to the value provided for |
String |
|
|
Inserts content to be displayed inside a default (empty) textarea. |
String |
|
Do
- Make sure that the label element follows the textarea in the HTML
- Use unique ID and name values for each textarea
- Match the placeholder and label text for the "floating label" effect
- Make note of all available attributes
Don't
- Do not enter default content into the textarea unless you intend for it to be submitted