Input Edit

Import: @bnotk/dsx/css/input-edit.css

Live Preview

Classes

Class	Description
`.dsx-input-edit`	Base editable field wrapper
`.dsx-input-edit__input`	Input element with room for actions
`.dsx-input-edit__buttons`	Positioned button group
`.dsx-input-edit__buttons-cancel`	Cancel action button
`.dsx-input-edit__buttons-save`	Save action button
`.dsx-input-edit__success`	Success indicator with fade-out animation

Examples

<div class="dsx-input-edit">
  <label class="dsx-field__label" for="input-edit-example">Name</label>
  <input id="input-edit-example" type="text" class="dsx-input dsx-input-edit__input" value="John Doe">
  <div class="dsx-input-edit__buttons">
    <button type="button" class="dsx-input-edit__buttons-cancel" aria-label="Cancel">
      <svg viewBox="0 0 12 12" aria-hidden="true"></svg>
    </button>
    <button type="button" class="dsx-input-edit__buttons-save" aria-label="Save">
      <svg viewBox="0 0 12 12" aria-hidden="true"></svg>
    </button>
  </div>
</div>