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

Adicionar disco

Álbum

Kind of Blue

Artista

Buscar artista…

Ano

abcd

Insira um ano válido (ex: 1969)

Focus · Default · Error — três estados em contexto real

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="#C8F53C" 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`