Componentes

form

Explore prévias interativas, encontre os componentes ideais e incorpore componentes abertos ao seu projeto com o código-fonte incluído.

Crie com um guia Conecte seu agente Explorar modelos de páginas

36 de 47

Carregando o índice completo de busca.

Floating label input

1529Floating label inputCampos de entradaUm campo de texto cujo rótulo fica dentro da caixa e sobe até a borda superior quando o campo está em foco ou quando o campo tem um valor, com aparência em foco, válida e inválida.

Anchored detail popover

1910Anchored detail popoverSobreposiçõesUm botão de gatilho que abre um pequeno painel ancorado contendo um formulário de configurações intitulado, saindo da borda do gatilho e fechando em Escape ou em um clique externo.

Branded Code Panel

1925Branded Code PanelFormuláriosUm painel de verificação centralizado sob um pequeno bloqueio de marca, onde um código rejeitado agita a linha uma vez, limpa-a e volta o foco para a primeira caixa.

Card blur tabs

1928Card blur tabsNavegaçãoGuias emolduradas em um cartão com borda cujo conteúdo fica brevemente desfocado e desbotado quando você alterna os painéis, com um comprimido deslizante atrás do rótulo da guia ativa.

1957Field with status iconFormuláriosUma entrada rotulada cuja borda final mostra um pequeno ícone de verificação ou aviso que desaparece no momento em que a validade do campo muda, sem alterar o layout.

Focus Guard Form

1964Focus Guard FormFormuláriosUm formulário que, em caso de falha no envio, cancela o envio, move o foco do teclado diretamente para o primeiro campo inválido e anuncia o problema para usuários de leitores de tela.

Select All Checklist

1982Select All ChecklistCampos de entradaUma caixa de seleção pai que mostra um traço quando apenas alguns de seus itens filhos estão marcados e uma marca de seleção quando cada item está marcado.

One Question Wizard

2006One Question WizardFormuláriosUm formulário de várias etapas que mostra uma única pergunta por vez com uma leitura do progresso, avançando apenas quando a pergunta atual tiver uma resposta válida.

Paired Code Split View

2010Paired Code Split ViewFormuláriosUma etapa de verificação em tela dividida cujas caixas de código são agrupadas em pares com traços entre elas, sendo enviada no momento em que a última caixa é preenchida.

Centered modal frame

2119Centered modal frameSobreposiçõesUm modal centralizado simples que esmaece e aumenta sobre um fundo esmaecido, com cabeçalho, corpo e rodapé, para formulários e confirmações cotidianas.

Edge-slide panel

2146Edge-slide panelSobreposiçõesUm painel de configurações que fica alinhado com a borda da tela enquanto a página atrás dele escurece e fica desfocada.

Addon Input Group

2297Addon Input GroupCampos de entradaUm campo de texto envolto em um shell com borda que pode conter um ícone inicial, um botão final ou texto e compartilha um anel de foco em todo o grupo.

Clean Text Field

2321Clean Text FieldCampos de entradaUma entrada de texto simples e com bordas para um formulário rotulado: neutro em repouso, um anel de destaque nítido em foco, silenciado quando desativado.

Drawn check checkbox

2343Drawn check checkboxCampos de entradaUma caixa de seleção cuja marca de seleção se desenha traço por traço à medida que a caixa é preenchida com uma cor sólida de destaque.

Editable date field

2346Editable date fieldCampos de entradaUm campo de texto para uma data que aceita digitação livre e também pode ser preenchido em um pequeno popover de calendário aberto por um botão de ícone à direita.

Focus ring text input

2356Focus ring text inputCampos de entradaUm campo de texto de linha única com um espaço reservado silenciado e um anel de destaque sólido que aparece apenas em foco.

Passcode slot input

2393Passcode slot inputCampos de entradaUm campo one-time-passcode de slots de borda compartilhada e fundidos sobre uma entrada oculta, com um cursor piscando no slot vazio ativo.

Account signup

2731Account signupPáginasUma página de inscrição centralizada com um campo de e-mail, um botão principal para criar conta, um divisor e dois botões secundários para continuar com provedores de identidade alternativos.

Centered signup card

2733Centered signup cardPáginasUm cartão de página centralizado que coleta nome completo, e-mail, senha e confirmação, cada campo com uma linha auxiliar curta, além de um botão de inscrição de conta conectada.

Detailed signup card

2734Detailed signup cardPáginasUm cartão de inscrição centralizado que coleta nome completo, e-mail, senha e confirmação, cada um com uma linha auxiliar, antes de um botão principal de criação de conta.

Image panel login card

2736Image panel login cardPáginasUm amplo cartão de login dividido em um painel de formulário e um painel de imagens decorativas, com uma linha de três botões de login alternativos apenas com ícones e texto de termos abaixo.

Image panel signup card

2737Image panel signup cardPáginasUm amplo cartão de inscrição dividido em um painel de formulário e um painel de imagem decorativo, com campos de senha emparelhados e três botões de provedor somente com ícones sob uma divisória.

Minimal email login

2739Minimal email loginPáginasUma página de login sem senha com uma pequena marca, um cabeçalho de boas-vindas, um campo de e-mail obrigatório, um único botão de envio e duas opções alternativas de login abaixo de uma divisória.

Minimal email sign in

2740Minimal email sign inPáginasUma página de login sem senha com uma marca, um cabeçalho de boas-vindas, um campo de e-mail, um botão principal e duas opções de login alternativas abaixo de uma divisória.

Muted social login

2742Muted social loginPáginasUma página de login completa em um fundo suavemente colorido com uma marca, dois botões de login social, uma divisória e um formulário de e-mail e senha em um cartão.

Muted compact signup

2743Muted compact signupPáginasUma página de inscrição com um cartão centralizado em um fundo colorido suave, onde os dois campos de senha compartilham uma linha compacta de duas colunas sob uma única linha auxiliar.

Signup card on tint

2748Signup card on tintPáginasUm cartão de inscrição centralizado em um fundo de página colorido, emparelhando os campos de senha e confirmação de senha lado a lado em uma linha auxiliar compartilhada.

Signup card with photo

2749Signup card with photoPáginasUm amplo cartão de inscrição dividido em metade de formulário e metade de foto recortada, coletando e-mails e senhas emparelhadas antes de uma fileira de botões de provedor apenas com ícones.

Signup page with social

2750Signup page with socialPáginasUma página de inscrição sem cartão que coleta nome, e-mail e senhas correspondentes acima de um botão de provedor alternativo delineado e um link de login centralizado.

Simple centered login

2751Simple centered loginPáginasUm cartão de página de login centralizado com campos de e-mail e senha, um botão de envio de largura total, um botão de login único opcional e um link para criar uma conta.

Simple sign-in card

2752Simple sign-in cardPáginasUm cartão de página de login centralizado com um campo de e-mail rotulado, um campo de senha com um link para esquecer a senha, um botão de envio principal e um botão de provedor alternativo delineado.

Orbit drop zone

2774Orbit drop zoneCampos de entradaValide um arquivo, simule o progresso do envio e mantenha um anexo que pode ser removido.

Single value slider

2791Single value sliderCampos de entradaUm controle deslizante horizontal com um polegar arrastável que preenche a trilha atrás dele para que o valor atual seja lido rapidamente.

Auto Grow Textarea

2792Auto Grow TextareaCampos de entradaUm campo de texto de várias linhas que fica mais alto à medida que a pessoa digita mais, em vez de rolar dentro de uma caixa fixa.

Compact select menu

2801Compact select menuCampos de entradaUm botão de disparo que abre uma lista flutuante de opções, com a escolha atual mostrada no botão e uma marca ao lado dela na lista.

Settings toggle switch

2802Settings toggle switchCampos de entradaUm pequeno botão liga / desliga com um botão deslizante que muda uma única configuração, sua trilha vai de silenciado a um acento sólido enquanto o botão se estica como um elástico se pressionado no meio do deslizamento.

Compare estes componentes

Escolha pelo comportamento e pelo layout; depois confira os frameworks disponíveis e os requisitos de acesso na página de cada componente.

Account signup
Uma página de inscrição centralizada com um campo de e-mail, um botão principal para criar conta, um divisor e dois botões secundários para continuar com provedores de identidade alternativos.
Addon Input Group
Um campo de texto envolto em um shell com borda que pode conter um ícone inicial, um botão final ou texto e compartilha um anel de foco em todo o grupo.
Anchored detail popover
Um botão de gatilho que abre um pequeno painel ancorado contendo um formulário de configurações intitulado, saindo da borda do gatilho e fechando em Escape ou em um clique externo.

Orientações de design

Abrir o índice completo

Etiquetas

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)