Text input

A component for the HTML input type="text" element.

Examples

Text input
Open in Storybook
Loading story...

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.

Text input with label

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

Text input with hidden label

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

Alternatively, you can use a plain label element:

Text input with label using label

<label for="issue-title">{{ __('Issue title') }}</label>
<gl-form-input id="issue-title" v-model="title" />

Text input with hidden label using label

<label for="issue-title" class="gl-sr-only">{{ __('Issue title') }}</label>
<gl-form-input id="issue-title" v-model="title" />

Last updated at: