Textarea

<gstock-textarea> | GstockTextarea

<gstock-textarea></gstock-textarea>

Sizes

Small

Lorem ipsum dolor sit amet alliam tulliam est sit amet consectetur est.

Disabled with value

<gstock-textarea size="small"> Small </gstock-textarea>
<gstock-textarea
  size="small"
  placeholder="How can we help you during your appointment? Do you have a preferred Style Advisor?"></gstock-textarea>
<gstock-textarea size="small">
  Lorem ipsum dolor sit amet alliam tulliam est sit amet consectetur est.
</gstock-textarea>
<gstock-textarea size="small" placeholder="Disabled with placeholder" disabled> </gstock-textarea>
<gstock-textarea size="small" disabled> Disabled with value </gstock-textarea>

Placeholder

Use the placeholder attribute to add a placeholder.

<gstock-textarea placeholder="This is a test placeholder..."></gstock-textarea>

Disabled

Use the disabled attribute to disable a textarea.

This is a test value

<gstock-textarea disabled> This is a test value </gstock-textarea>

Label

Use the label attribute to give the textarea an accessible label.

<gstock-textarea label="This is a test label:"></gstock-textarea>

For labels that contain HTML, use the label slot instead.

! This is a custom html label:

<gstock-textarea>
  <label slot="label">
    <strong style="background-color: yellow; border-radius: 16px: width: 10px;"> ! </strong>
    This is a custom html label:</label
  >
</gstock-textarea>

Help Text

Add descriptive help text to a textarea with the help-text attribute.

<gstock-textarea help-text="This is a test help-text."></gstock-textarea>

For help texts that contain HTML, use the help-text slot instead.

Comments

<gstock-textarea><label slot="help-text">Comments</label></gstock-textarea>

Rows

Use the rows attribute to change the number of text rows that get shown.

<gstock-textarea rows="2"></gstock-textarea>

Prevent Resizing

By default the component textarea can be resized vertically by the user. To prevent resizing, set the resize attribute to none.

<gstock-textarea resize="none"></gstock-textarea>

Min/Max length

<gstock-textarea minlength="4" size="small"></gstock-textarea>
<gstock-textarea maxlength="8" size="small"></gstock-textarea>
<gstock-textarea minlength="4" maxlength="8" size="small"></gstock-textarea>

Validation

<gstock-textarea minlength="4"></gstock-textarea>
<gstock-textarea maxlength="8"></gstock-textarea>
<gstock-textarea minlength="4" maxlength="8"></gstock-textarea>

<gstock-textarea></gstock-textarea>
<gstock-textarea required></gstock-textarea>
<gstock-textarea required="false"></gstock-textarea>