Skip to main content

Text action

The text action component allows the user to apply an action to a specific text entry. For example, typing in an email address and then adding that to a list of other addresses. The glyph informs the user what the expected action will be.

Example

Text action with add glyph on a default theme

Best practices

Text action is useful for applying an action that doesn't already exist in MWF. Ideally, these actions would be represented by existing glyphs in the MWF typeface, and the expected result would be clearly explained by the context, label, and choice of a glyph.

Do

  • It is recommended to have some sort of hint text inside and/or label above your text action to indicate what kind of text input the user should type. The framework will style hint text appropriately.
  • Make sure the expected action is clear by the correct choice of glyph or image.
  • Use text action in conjunction with other elements (i.e. form elements, submit button, etc.) in cases where collection or input of data is needed.

Don’t

  • Avoid relying on text action for many text entries. It's best used for applying actions to a few text entries.
  • Don't use text action to perform the same action as existing components, for example search.

Also known as

Multi-line text entry
Resizable text box
Text box

Related

Label
Text-field

Development

  • Schema definition: The text-action schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default add text action

<div class="c-text-action">
    <input aria-label="Add content" type="text" name="add-field" placeholder="Add text">
    <button class="c-glyph glyph-add" name="add-button">
        <span class="x-screen-reader">add</span>
    </button>
</div>

Disabled add text action

<div class="c-text-action">
    <input aria-label="Add content" type="text" name="add-field" placeholder="Add text" disabled="disabled">
    <button class="c-glyph glyph-add" name="add-button">
        <span class="x-screen-reader">add</span>
    </button>
</div>

Read-only add text action

<div class="c-text-action">
    <input aria-label="Add content" type="text" name="add-field" placeholder="Add text" readonly="readonly">
    <button class="c-glyph glyph-add" name="add-button">
        <span class="x-screen-reader">add</span>
    </button>
</div>

Required add text action

<div class="c-text-action">
    <input aria-label="Add content" type="text" name="add-field" placeholder="Add text" required>
    <button class="c-glyph glyph-add" name="add-button">
        <span class="x-screen-reader">add</span>
    </button>
</div>

Forward text action

<div class="c-text-action">
    <input aria-label="Forward content" type="text" name="forward-field" placeholder="Forward text">
    <button class="c-glyph glyph-forward" name="forward-button">
        <span class="x-screen-reader">forward</span>
    </button>
</div>

Check mark text action

<div class="c-text-action">
    <input aria-label="Check mark content" type="text" name="check-mark-field" placeholder="Check mark text">
    <button class="c-glyph glyph-check-mark" name="check-mark-button">
        <span class="x-screen-reader">check-mark</span>
    </button>
</div>

Download text action

<div class="c-text-action">
    <input aria-label="Download content" type="text" name="download-field" placeholder="Download text">
    <button class="c-glyph glyph-download" name="download-button">
        <span class="x-screen-reader">download</span>
    </button>
</div>