Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogoforms · stable

Inputs

Campos de texto, e-mail, senha, número e estados de validação. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Inputs quando a interface precisar de campos de texto, e-mail, senha, número e estados de validação.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias
CONTAINER · stable

Text / Email / Password

Text / Email / Password, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-grid sc-cols-2 sc-gap-4" style="align-items:start;">
                    <input class="sc-input" placeholder="Nome" aria-label="Nome">
                    <input class="sc-input" type="email" placeholder="Email" aria-label="Email">
                    <div class="sc-input-group">
                      <span class="sc-input-icon"><i class="sc-icon" data-smart-icon="lock"></i></span>
                      <input class="sc-input" type="password" placeholder="Senha" aria-label="Senha">
                    </div>
                    <div class="sc-input-group">
                      <span class="sc-input-icon"><i class="sc-icon" data-smart-icon="search"></i></span>
                      <input class="sc-input" placeholder="Buscar..." aria-label="Buscar">
                      <button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Filtrar</button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-gridsc-cols-2sc-gap-4sc-inputsc-input-groupsc-input-iconsc-iconsc-btnsc-btn-outlinesc-btn-sm

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Search (pill)

Search (pill), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-input-group sc-input-group-pill">
                    <span class="sc-input-icon"><i class="sc-icon" data-smart-icon="search"></i></span>
                    <input class="sc-input" placeholder="Pesquisar produtos..." aria-label="Pesquisar produtos">
                    <button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Buscar</button>
                  </div>
Classes, JavaScript e API
sc-input-groupsc-input-group-pillsc-input-iconsc-iconsc-inputsc-btnsc-btn-primarysc-btn-sm

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Floating label

Floating label, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-grid sc-cols-2 sc-gap-4" style="align-items:start;">
                    <div class="sc-field sc-field-float">
                      <input class="sc-input" placeholder=" " aria-label="Primeiro nome">
                      <label class="sc-label">Primeiro nome</label>
                    </div>
                    <div class="sc-field sc-field-float">
                      <input class="sc-input" type="email" placeholder=" " aria-label="Email">
                      <label class="sc-label">Email</label>
                    </div>
                  </div>
Classes, JavaScript e API
sc-gridsc-cols-2sc-gap-4sc-fieldsc-field-floatsc-inputsc-label

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Glow shell (conic border)

Glow shell (conic border), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-input-shell sc-input-shell-glow">
                    <div class="sc-input-shell-inner">
                      <span class="sc-input-icon"><i class="sc-icon" data-smart-icon="search"></i></span>
                      <input class="sc-input" placeholder="Explore..." aria-label="Explore">
                      <button class="sc-btn sc-btn-glass sc-btn-sm" type="button">Go</button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-input-shellsc-input-shell-glowsc-input-shell-innersc-input-iconsc-iconsc-inputsc-btnsc-btn-glasssc-btn-sm

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Tipos reais (number / date / time)

Tipos reais (number / date / time), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-grid sc-cols-2 sc-gap-4" style="align-items:start;">
                    <div class="sc-field">
                      <label class="sc-label" for="inNum">Quantidade</label>
                      <div class="sc-input-group">
                        <span class="sc-input-icon"><i class="sc-icon" data-smart-icon="hash"></i></span>
                        <input id="inNum" class="sc-input" type="number" value="2" min="0" step="1" aria-label="Quantidade">
                      </div>
                      <div class="sc-help">Use <code>type="number"</code> para stepper nativo.</div>
                    </div>
                    <div class="sc-field">
                      <label class="sc-label" for="inDate">Data</label>
                      <div class="sc-input-group">
                        <span class="sc-input-icon"><i class="sc-icon" data-smart-icon="calendar"></i></span>
                        <input id="inDate" class="sc-input" type="date" aria-label="Data">
                      </div>
                      <div class="sc-help">Theme-aware + tabular nums.</div>
                    </div>
                    <div class="sc-field">
                      <label class="sc-label" for="inTime">Horário</label>
                      <div class="sc-input-group">
                        <span class="sc-input-icon"><i class="sc-icon" data-smart-icon="clock"></i></span>
                        <input id="inTime" class="sc-input" type="time" aria-label="Horário">
                      </div>
                    </div>
                    <div class="sc-field">
                      <label class="sc-label" for="inDt">DateTime</label>
                      <input id="inDt" class="sc-input" type="datetime-local" aria-label="DateTime">
                      <div class="sc-help">Boa para agendamentos.</div>
                    </div>
                  </div>
Classes, JavaScript e API
sc-gridsc-cols-2sc-gap-4sc-fieldsc-labelsc-input-groupsc-input-iconsc-iconsc-inputsc-help

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Textarea (mensagens)

Textarea (mensagens), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-field">
                    <label class="sc-label" for="inMsg">Mensagem</label>
                    <textarea id="inMsg" class="sc-textarea" placeholder="Escreva uma mensagem⬦" aria-label="Mensagem"></textarea>
                    <div class="sc-help">Textarea com resize vertical + focus ring.</div>
                  </div>
Classes, JavaScript e API
sc-fieldsc-labelsc-textareasc-help

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

File input (nativo, estilizado)

File input (nativo, estilizado), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-field">
                    <label class="sc-label" for="inFile">Anexar arquivo</label>
                    <input id="inFile" class="sc-input" type="file" aria-label="Anexar arquivo">
                    <div class="sc-help">O botão do arquivo é estilizado via <code>::file-selector-button</code>.</div>
                  </div>
Classes, JavaScript e API
sc-fieldsc-labelsc-inputsc-help

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Addons (prefix/sufix) + ação

Addons (prefix/sufix) + ação, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-grid sc-cols-2 sc-gap-4" style="align-items:start;">
                    <div class="sc-input-group">
                      <span class="sc-input-addon">R$</span>
                      <input class="sc-input" type="number" placeholder="0,00" aria-label="Preço">
                      <span class="sc-input-addon">BRL</span>
                    </div>
                    <div class="sc-input-group">
                      <span class="sc-input-icon"><i class="sc-icon" data-smart-icon="search"></i></span>
                      <input class="sc-input" type="search" placeholder="Buscar⬦" aria-label="Buscar">
                      <button class="sc-btn sc-btn-ghost sc-input-action" type="button" aria-label="Limpar">
                        <i class="sc-icon" data-smart-icon="x"></i>
                      </button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-gridsc-cols-2sc-gap-4sc-input-groupsc-input-addonsc-inputsc-input-iconsc-iconsc-btnsc-btn-ghostsc-input-action

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Estados (disabled / readonly / valid / invalid)

Estados (disabled / readonly / valid / invalid), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-grid sc-cols-2 sc-gap-4" style="align-items:start;">
                    <div class="sc-field">
                      <label class="sc-label">Disabled</label>
                      <input class="sc-input" placeholder="Desabilitado" disabled="">
                      <div class="sc-help">Use <code>disabled</code> sempre que possível (A11y).</div>
                    </div>
                    <div class="sc-field">
                      <label class="sc-label">Readonly</label>
                      <input class="sc-input" value="Somente leitura" readonly="" aria-label="Campo somente leitura">
                      <div class="sc-help">Bom para inputs “copyable”.</div>
                    </div>
                    <div class="sc-field">
                      <label class="sc-label">Valid</label>
                      <input class="sc-input is-valid" value="ok@smart.com" aria-label="Campo com estado válido">
                      <div class="sc-help">Classe <code>.is-valid</code>.</div>
                    </div>
                    <div class="sc-field">
                      <label class="sc-label">Invalid</label>
                      <input class="sc-input is-invalid" value="email@" aria-label="Campo com estado inválido">
                      <div class="sc-help">Classe <code>.is-invalid</code>.</div>
                    </div>
                  </div>
Classes, JavaScript e API
sc-gridsc-cols-2sc-gap-4sc-fieldsc-labelsc-inputsc-help

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Range (fill automático + steps)

Range (fill automático + steps), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-card sc-card-outline" style="display:grid; gap:14px;">
                    <label class="doc-muted" style="margin:0;">Volume</label>
                    <input class="sc-range" type="range" min="0" max="100" value="35" aria-label="Volume">
                    <label class="doc-muted" style="margin:0;">Progresso (steps)</label>
                    <input class="sc-range sc-range-steps" type="range" min="0" max="100" value="60" aria-label="Progresso">
                  </div><div class="doc-muted" style="margin: 18px 0 10px;"><span class="sc-badge">Extra</span> Range expressivo (theme-aware)</div><div class="sc-card sc-card-outline" style="display:grid; gap:16px;">
                    <input class="sc-range sc-range-kawaii" type="range" min="1" max="20" value="7" aria-label="Controle de intensidade 1">
                    <input class="sc-range sc-range-kawaii" style="--sc-range-base:#f17a42;" type="range" min="1" max="20" value="4" aria-label="Controle de intensidade 2">
                    <input class="sc-range sc-range-kawaii" style="--sc-range-base:#9b3d19;" type="range" min="1" max="20" value="12" aria-label="Controle de intensidade 3">
                  </div>
Classes, JavaScript e API
sc-cardsc-card-outlinesc-rangesc-range-stepssc-badgesc-range-kawaii

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Com ícone

Com ícone, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<label class="sc-label sc-showcase-field"><span>Com ícone</span><div class="sc-input-group"><input class="sc-input" placeholder="Com ícone" aria-label="Com ícone"></div></label>
Classes, JavaScript e API
sc-labelsc-showcase-fieldsc-input-groupsc-input

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Com ação

Com ação, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<label class="sc-label sc-showcase-field"><span>Com ação</span><div class="sc-input-group"><input class="sc-input" placeholder="Com ação" aria-label="Com ação"><button class="sc-btn sc-btn-primary" type="button">Aplicar</button></div></label>
Classes, JavaScript e API
sc-labelsc-showcase-fieldsc-input-groupsc-inputsc-btnsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Currency

Currency, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<label class="sc-label sc-showcase-field"><span>Currency</span><div class="sc-input-group"><input class="sc-input" inputmode="decimal" value="1.280,00" aria-label="Currency"></div></label>
Classes, JavaScript e API
sc-labelsc-showcase-fieldsc-input-groupsc-input

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Tags

Tags, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<label class="sc-label sc-showcase-field"><span>Tags</span><div class="sc-input-group"><input class="sc-input" placeholder="Tags" aria-label="Tags"></div></label>
Classes, JavaScript e API
sc-labelsc-showcase-fieldsc-input-groupsc-input

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Validation summary

Validation summary, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<label class="sc-label sc-showcase-field"><span>Validation summary</span><div class="sc-input-group"><input class="sc-input" placeholder="Validation summary" aria-label="Validation summary"></div><small class="sc-text-danger">Revise este campo antes de continuar.</small></label>
Classes, JavaScript e API
sc-labelsc-showcase-fieldsc-input-groupsc-inputsc-text-danger

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Componentes relacionados

Formulários completos →Select menu →Checkbox, radio e switch →Range slider →