Componentes

Campo de Texto

Superfície escura com borda verde no foco. Label acima do campo quando o placeholder não é suficiente. Ícone leading para buscas.

Visão geral

Sua nota

Padrão

Placeholder em cinza. Sem borda. Background escuro.

Focado

Borda verde acende. Texto em branco.

Com label

Texto descritivo fixo acima do campo.

Com ícone

Ícone leading para indicar busca ou tipo de dado.

Anatomia

Adicionar disco

Álbum

Kind of Blue

Artista

Buscar artista…

Ano 1959

Container

bg-[#1a1a1a] rounded-xl px-4 py-3 border border-transparent — borda vira #C8F53C no foco

Valor / Placeholder

Valor: text-[#f5f5f5] · Placeholder: text-[#888] · text-sm

Label (opcional)

text-[#888] text-sm block mb-2 · acima do container

Ícone leading (opcional)

Lucide 16×16 · stroke="#888" absolute left-3 · campo com pl-9

Variantes

Padrão

Quando usar

Campos de entrada livre onde o placeholder descreve suficientemente o dado esperado.

Classes

bg-[#1a1a1a] text-[#f5f5f5] rounded-xl
px-4 py-3 outline-none
border border-transparent
focus:border-[#C8F53C] transition
placeholder-[#888]

Com label

Sua nota (0 a 5)

Quando usar

Quando o placeholder desaparece ao digitar e o usuário precisa de uma referência permanente do que está preenchendo.

Classes

label: text-[#888] text-sm block mb-2

Com ícone leading

Quando usar

Campos de busca. O ícone reforça a intenção sem precisar de label.

Classes

wrapper: relative
ícone: absolute left-3 top-1/2 -translate-y-1/2
       w-4 h-4 stroke="#888"
input: pl-9

Estados

Vazio

Placeholder visível em #888. Borda transparente.

Focado

border-[#C8F53C] — acende ao focar. outline-none remove o outline do browser.

Preenchido

Texto em #f5f5f5. Borda volta a transparente ao perder foco.

Disabled

disabled:opacity-40 · cursor-not-allowed · não interativo.

Do / Don't

Nota (0 a 5)

Faça Label quando o dado não é óbvio. O usuário sabe o que preencher mesmo após começar a digitar.

Evite Placeholder longo desaparece ao digitar. O usuário perde o contexto no meio do preenchimento.

Faça Um campo por dado. Nome do artista separado do álbum.

Evite Dois dados num único campo dificulta validação e parsing.

Specs

Propriedade	Valor
Background	`#1a1a1a` (var(--surface1))
Texto valor	`#f5f5f5`
Texto placeholder	`#888`
Border padrão	`1px solid transparent`
Border focado	`1px solid #C8F53C`
Border radius	`rounded-xl` · 12px
Padding	`px-4 py-3` · 16px 12px
Font size	`14px`
Outline	`none` (substituído pela borda)
Transição	`border-color 0.2s`
Disabled	`opacity-40 · cursor-not-allowed`
Label	`text-[#888] text-sm block mb-2`
Ícone leading	Lucide 16px · `absolute left-3` · input com `pl-9`