Textarea

A component for the HTML textarea element.

Examples

<!-- live-example -->
<gl-form-textarea placeholder="Enter description" />

In form group

<!-- live-example -->
<gl-form-group label="Textarea" label-for="textarea-form-group">
  <gl-form-textarea
    id="textarea-form-group"
    placeholder="Enter description"
  />
</gl-form-group>

View in Pajamas UI Kit →

Structure

TODO:
Add structure image. Create an issue

Guidelines

TODO:
Add guidelines. Create an issue

Appearance

TODO:
Add appearance. Create an issue

Behavior

TODO:
Add behavior. Create an issue

Accessibility

  • When using GlFormGroup, the label prop alone does not give the input an accessible name.
  • The label-for prop must also be provided to give the input an accessible name.

Textarea with label

<gl-form-group :label="__('Issue description')" label-for="issue-description">
  <gl-form-textarea id="issue-description" v-model="description" />
</gl-form-group>

Textarea with hidden label

<gl-form-group :label="__('Issue description')" label-for="issue-description" label-sr-only>
  <gl-form-textarea id="issue-description" v-model="description" />
</gl-form-group>

Code reference

GlFormTextarea

Note: This needs a v-model property to work correctly. See this issue on Bootstrap Vue for more information.

Loading story...

Last updated at: