Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
  • Display
  • Forms
    • Form controls
    • Form layouts
      • Guidelines
      • Form rows
      • Described form groups
      • Compressed forms
      • Form labels
      • Prepends and appends
      • Form control layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Tabular content
  • Templates
  • Editors and syntax
  • EUI
  • Forms
  • Form layouts
  • Prepends and appends

Prepends and appends

Most form controls accept a

prepend and append prop that allows passing a single node/string or an array of nodes/strings. Strings will be converted into form labels and connected to the input via htmlFor for accessibility.

These are great for demarcating the input's metric like "px" or "ms". You can also pass buttons for input settings or additional filters. Just be sure to use <EuiButtonEmpty size="xs" />.

Loading...
Edit this page
Previous
Form labels
Next
Form control layouts
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic