2.13 #Components.editable-text Editable Text
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