Inline Edit
Campo que alterna entre modo leitura e modo edição com um clique. Reduz fricção na atualização de dados sem necessidade de abrir formulários completos. Dark mode automático via variáveis semânticas.
Uso
Quando e como utilizar o inline edit.
- Default — Com botões de confirmar/cancelar visíveis.
- Compact — Sem botões, confirma com Enter e cancela com Escape.
- Textarea — Para textos longos com resize vertical.
- Em tabela — Edição rápida de células sem sair da tabela.
Exemplos
Veja abaixo os exemplos interativos do inline edit.
Carregando exemplo...
Anatomia
Estrutura interna do componente e seus elementos.
| Parte | Elemento | Descrição |
|---|---|---|
| Container | .inline-edit | Wrapper posição relativa |
| Modo leitura | .inline-edit__read | Texto + ícone de edição (hover) |
| Ícone editar | .inline-edit__edit-icon | Lápis SVG, opacity 0 → 1 no hover |
| Modo edição | .inline-edit__field | Input ou textarea com borda brand |
| Ações | .inline-edit__actions | Botões confirmar (check) e cancelar (×) |
Propriedades
Classes, estados e atributos disponíveis.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.inline-edit | classe | — | Container principal do inline edit. |
.inline-edit__read | classe | — | Modo leitura (texto estático, clicável). |
.inline-edit__text | classe | — | Texto exibido no modo leitura. |
.inline-edit__edit-icon | classe | — | Ícone de lápis (aparece no hover). |
.inline-edit__field | classe | — | Container do input/textarea no modo edição. |
.inline-edit__actions | classe | — | Botões de confirmar e cancelar. |
.inline-edit__confirm | classe | — | Botão de confirmação. |
.inline-edit__cancel | classe | — | Botão de cancelamento. |
.inline-edit--editing | estado | — | Estado ativo de edição. |
.inline-edit--compact | classe | — | Sem botões de ação (Enter confirma, Esc cancela). |
.inline-edit--disabled | estado | — | Campo não editável. |
.inline-edit--error | estado | — | Estado de erro (borda vermelha). |
data-field | atributo | — | Nome do campo para identificação no evento. |
data-arenito | atributo | inline-edit | Auto-init do comportamento JavaScript. |
Código
Snippets prontos para copiar e usar no seu projeto.
Default
html
<div class="inline-edit" data-field="nome" data-arenito="inline-edit">
<div class="inline-edit__read">
<span class="inline-edit__text">Valor atual</span>
<span class="inline-edit__edit-icon">
<svg><!-- ícone lápis --></svg>
</span>
</div>
<div class="inline-edit__field">
<input type="text" value="Valor atual" />
<div class="inline-edit__actions">
<button class="inline-edit__confirm" aria-label="Confirmar">
<svg><!-- check --></svg>
</button>
<button class="inline-edit__cancel" aria-label="Cancelar">
<svg><!-- × --></svg>
</button>
</div>
</div>
</div>Compact (sem botões)
html
<div class="inline-edit inline-edit--compact" data-arenito="inline-edit">
<div class="inline-edit__read">
<span class="inline-edit__text">Valor</span>
</div>
<div class="inline-edit__field">
<input type="text" value="Valor" />
</div>
</div>Design
Especificações visuais e tokens utilizados.
Especificações
| Propriedade | Valor |
|---|---|
| Padding read | 6px 8px |
| Border-radius | 4px |
| Fonte | Inter 14px |
| Borda edição | 2px solid brand |
| Botão ação | 28x28 |
| Ícone editar | 14x14, opacity 0 → 1 |
Tokens utilizados
| Estado | Background | Borda | Texto |
|---|---|---|---|
| Read | transparent | transparent | --text-base-neutral-default |
| Read hover | --surface-base-neutral-container-emphasis | --border-base-neutral-default | --text-base-neutral-default |
| Editing | --surface-base-neutral-container-default | --border-base-brand-default | --text-base-neutral-default |
| Error | — | --border-base-error-default | — |