2.13 #Components.editable-text Editable Text

Toggle example guides Toggle HTML markup

Browser support for caret-color: Safari11.1+, Firefox53+, Chrome57+

Browser support for contenteditable HTML attribute: IE6+, Safari3.1+, Firefox3.5+, Chrome4+

Unsupported browsers will show default caret color

An example for the "oneline" modifier is not available since it requires JavaScript to work

This is an editable label

This is not an editable label - disabled

This is a title and it can go over multiple lines. This is a title and it

This is a description and it can go over multiple lines. This is a description and it can go over multiple lines. This is a description and it can go over multiple lines.

Markup
 <div class="sb-flex-row sb-justify-content-start">
   <div>
     <span contenteditable role="textbox" class="sb-editable-text sb-editable-text--inline" aria-multiline="true" aria-placeholder="Add a hint text to guide the user" data-placeholder="Add a hint text to guide the user"></span>
   </div>
   <div>
     <h4 contenteditable role="textbox" class="sb-editable-text sb-title--l sb-flex-inline" aria-multiline="true" aria-placeholder="A placeholder will take the place of a deleted content" data-placeholder="A placeholder will take the place of a deleted content">This is an editable label</h4>
   </div>
   <div>
     <h4 contenteditable="false" role="textbox" data-disabled="true" class="sb-editable-text sb-title--l sb-flex-inline" aria-multiline="true" aria-placeholder="A placeholder will take the place of a deleted content">This is not an editable label - disabled</h4>
   </div>
   <div>
     <h2 contenteditable role="textbox" class="sb-editable-text sb-display sb-flex-inline" aria-multiline="true" aria-placeholder="Add a title to your new chart" data-placeholder="Add a title to your new chart"></h2>
   </div>
   <div>
     <h3 contenteditable role="textbox" class="sb-editable-text sb-title--s sb-flex-inline" aria-multiline="true" aria-placeholder="Add a description to help you understand the purpose of this chart" data-placeholder="Add a description to help you understand the purpose of this chart"></h3>
   </div>
   <div class="sb-col-6">
     <div class="sb-margin-bottom-xs">
       <h2 contenteditable role="textbox" class="sb-editable-text sb-display" aria-multiline="true" aria-placeholder="This is a multiline title placeholder. This is a multiline title" data-placeholder="This is a multiline title placeholder. This is a multiline title">This is a title and it can go over multiple lines. This is a title and it</h2>
     </div>
     <div>
       <p contenteditable role="textbox" class="sb-editable-text sb-title--s" aria-multiline="true" aria-placeholder="This is a multiline description placeholder. This is a multiline description placeholder. This is a multiline description placeholder." data-placeholder="This is a multiline description placeholder. This is a multiline description placeholder. This is a multiline description placeholder.">This is a description and it can go over multiple lines. This is a description and it can go over multiple lines. This is a description and it can go over multiple lines.</p>
     </div>
   </div>
 </div>
Source: components/_editable-text.scss, line 1