Componentes

Campos de entrada

Campos, códigos, seletores e interruptores com estados claros.

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

36 de 104

Carregando o índice completo de busca.

Check draw toggle

1932Check draw toggleCampos de entradaUma caixa de seleção quadrada cuja marca de seleção se desenha traço por traço quando marcada, com um toque suave e escala flutuante.

Checkbox motion lab

1933Checkbox motion labCampos de entradaUma única caixa de seleção grande para ajustar exatamente a firmeza com que pressiona e a lentidão com que a marca de seleção aparece.

Checkmark draw checkbox

1934Checkmark draw checkboxCampos de entradaUma caixa de seleção quadrada que responde a uma verificação desenhando uma marca de seleção, um traço de cada vez, e mostra um pequeno traço quando seu estado está apenas parcialmente definido.

Directional theme wipe

1949Directional theme wipeCampos de entradaUma alternância claro-escuro que revela o novo tema com uma limpeza direcional que percorre todo o quadro, em vez de uma troca instantânea de cores.

Dot radio list

1951Dot radio listCampos de entradaUma lista vertical de opções de rádio com indicadores circulares, onde a seleção de uma preenche com um ponto e limpa o resto.

Elastic toggle switch

1954Elastic toggle switchCampos de entradaUm botão de alternância de pílula cujo polegar redondo se comprime em uma bolha enquanto pressionado e volta a girar com um salto suave, deslizando entre um estado neutro desligado e um preenchimento de destaque sólido.

Appointment Range Card

2108Appointment Range CardCampos de entradaUm cartão que combina uma grade de data de um único mês com um campo de hora de início e de término abaixo dela, para escolher um dia mais uma janela de tempo em um bloco compacto.

Appointment Scheduler Card

2109Appointment Scheduler CardCampos de entradaUm seletor de data único emoldurado dentro de um cartão intitulado com um botão pular para hoje no canto, projetado para agendar um compromisso.

Booked Dates Picker

2114Booked Dates PickerCampos de entradaUm seletor de data único em que uma série de dias já reservados mostra um aviso no número e não pode ser selecionado, deixando os dias abertos selecionáveis normalmente.

Bounded Stay Range Picker

2116Bounded Stay Range PickerCampos de entradaUm seletor de intervalo de dois meses que impõe um número mínimo e máximo de noites, de forma que apenas as datas de término dentro dessa janela permaneçam selecionáveis quando o início for definido.

Caption Style Date Picker

2118Caption Style Date PickerCampos de entradaUm seletor de data único emparelhado com um menu de seleção que alterna seu cabeçalho entre um menu suspenso combinado de mês e ano, um menu suspenso apenas de mês ou um menu suspenso apenas de ano.

Compact Time Range Picker

2126Compact Time Range PickerCampos de entradaUm cartão de calendário mensal com uma faixa de intervalo de tempo de duas células no rodapé, os dois campos de tempo divididos apenas por um pequeno traço para que o par seja lido como um controle de intervalo.

Date Range Picker

2139Date Range PickerCampos de entradaUm calendário de um único mês para escolher uma data de início e término, onde cada dia entre elas é preenchido como uma faixa contínua destacada quando ambas as extremidades são escolhidas.

Dropdown Date Picker

2143Dropdown Date PickerCampos de entradaUm seletor de data de mês único cujo cabeçalho usa um menu suspenso de mês e um menu suspenso de ano lado a lado, portanto, saltar para uma data distante exige uma seleção em vez de vários cliques de seta.

Dual Month Date Picker

2144Dual Month Date PickerCampos de entradaDuas grades de meses adjacentes compartilhando uma data selecionada, com um único par de setas que avançam ou retrocedem os dois meses juntos.

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.

Birthdate popover picker

2305Birthdate popover pickerCampos de entradaUm botão rotulado que abre um calendário flutuante com menus suspensos de mês e ano para chegar rapidamente ao ano de nascimento, fechando-se no momento em que o dia é escolhido.

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.

Date and Time Duo Picker

2332Date and Time Duo PickerCampos de entradaDois campos rotulados lado a lado, um botão de data compacto que abre um popover de calendário e um campo de hora simples, para definir uma data e uma hora como duas etapas independentes.

Day Agenda Calendar

2333Day Agenda CalendarCampos de entradaUm cartão que combina um calendário mensal compacto com uma lista de eventos agendados para o dia selecionado e um botão para adicionar outro evento.

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.

Dropdown Date Time Picker

2345Dropdown Date Time PickerCampos de entradaUm campo de data rotulado que abre um calendário mensal em um menu suspenso, emparelhado com dois campos de horário simples abaixo para um horário de início e de término.

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.

2757Avatar profile pickerCampos de entradaUm cartão de configuração de perfil: um estágio de avatar cujo anel brilhante é recolorido a cada seleção, uma faixa de miniaturas para alternar avatares e um campo de nome de usuário validado.

Before/After reveal handle

2758Before/After reveal handleCampos de entradaUm divisor arrastável sobre duas cenas empilhadas que revela uma à esquerda e outra à direita, movida pelo ponteiro, clique para pular e teclas de seta.

Bounce drop toggle

2759Bounce drop toggleCampos de entradaUma chave seletora vertical alta cuja bola cai para o fundo com um movimento saltitante quando desligada e desliza de volta para cima com uma mola apertada quando ligada.

Character budget counter

2760Character budget counterCampos de entradaUm campo de composição com uma leitura de caracteres restantes que perfura uma mola e aquece a cor conforme o orçamento se esgota.

Combobox field

2761Combobox fieldCampos de entradaUm campo suspenso pesquisável: digitar filtra uma lista de opções ao vivo e escolher uma preenche o campo.

Command search palette

2762Command search paletteCampos de entradaUm campo de pesquisa que coloca uma lista filtrada de comandos abaixo de si enquanto você digita, com destaque de teclas de seta, seleção instantânea e rodapé de dica de teclado.

Exposure dial slider

2766Exposure dial sliderCampos de entradaUma visualização da foto com uma leitura de exposição circular no canto acima de uma régua arrastável de marcas que define o valor de exposição em EV.

Filtered suggestion field

2768Filtered suggestion fieldCampos de entradaUm campo de texto que filtra uma lista de sugestões conforme você digita e mostra as correspondências em um menu suspenso abaixo, com navegação pelo teclado e um botão limpar.

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.

Curved input bar

2793Curved input barCampos de entradaUm campo de texto em forma de comprimido dobrado em um arco suave para cima, com o texto digitado, o cursor e o botão de envio seguindo a mesma curva.

Date Range Picker

2794Date Range PickerCampos de entradaUma grade de calendário mensal para escolher uma data de início e de término juntas, com os dias entre elas mostrados como um período conectado.

Elastic tug slider

2795Elastic tug sliderCampos de entradaUm controle deslizante que se estica como um elástico quando arrastado pelas extremidades, fazendo com que a faixa volte com um salto quando liberada.

Autosize text field

2805Autosize text fieldCampos de entradaUma entrada de texto multilinha que cresce à medida que a pessoa digita, até um limite generoso, com um anel de foco de destaque e um estado desativado.

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.

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.
Appointment Range Card
Um cartão que combina uma grade de data de um único mês com um campo de hora de início e de término abaixo dela, para escolher um dia mais uma janela de tempo em um bloco compacto.
Appointment Scheduler Card
Um seletor de data único emoldurado dentro de um cartão intitulado com um botão pular para hoje no canto, projetado para agendar um compromisso.

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)