Componentes de formulário
Todo controle de que um formulário precisa, de um input de texto simples a um multiselect com busca, um seletor de intervalo de datas e um campo de código único. Eles compartilham um sistema de campos para rótulos, descrições e erros, então a validação se lê igual em todo lugar.
Os inputs ficam em 16 pixels em telas sensíveis ao toque para o iOS nunca dar zoom, campos inválidos podem tremer para chamar a atenção e todo controle funciona só com o teclado.
- Calendar
- Checkbox
- Combobox
- Date picker
- Field
- Input
- Input group
- Input OTP
- Label
- Native select
- Questionnaire
- Radio group
- Select
- Slider
- Switch
- Textarea
- CalendarUma grade de datas para seleção única, de intervalo e múltipla, com meses deslizantes, prévias de intervalo e dias com tamanho adequado ao toque.
- CheckboxUma caixa de seleção cujo check é desenhado na tela, com pais indeterminados, grupos e rótulos que compartilham seu hover.
- ComboboxUm select filtrável com chips, grupos e resultados assíncronos, em um popup que se redimensiona conforme você digita.
- Date pickerUm botão que abre um calendário em um popover, ou em um bottom sheet no celular, para datas únicas e intervalos.
- FieldRótulos, descrições e erros ligados ao seu controle, com estados de validação e layouts para formulários.
- InputUm campo de texto com três tamanhos, estados inválido e somente leitura, estilo de validação nativa e fonte de 16px no toque para que os celulares nunca façam zoom.
- Input groupUm input com ícones, texto, botões ou uma dica de teclado anexados, compartilhando uma única borda e um único anel de foco.
- Input OTPSlots de código de uso único que aceitam digitação, colagem e preenchimento automático de SMS, com uma animação opcional que faz os códigos entrarem em cascata e um status para a verificação.
- LabelUm rótulo que acompanha seu controle, escurecendo quando ele está desabilitado e marcando-o como obrigatório ou opcional por conta própria.
- Native selectO select do próprio navegador, estilizado para combinar com o Input, com um placeholder discreto, suporte a Field e o seletor do sistema operacional em todos os dispositivos.
- QuestionnaireUm formulário passo a passo que se move entre perguntas com senso de direção, mostra o progresso real e responde pelo teclado.
- Radio groupEscolha uma opção de um conjunto, com um ponto que passa de uma opção para outra e cards cujo anel de seleção desliza até a nova escolha.
- SelectEscolha uma ou mais opções de uma lista que abre no valor atual, com typeahead, grupos e suporte a formulários.
- SliderEscolha um valor ou um intervalo arrastando, tocando na trilha ou usando as teclas, com saltos que deslizam e um balão de valor opcional.
- SwitchUm toggle de ligar/desligar que você pode tocar, pressionar ou arrastar, com um thumb que se estica sob o dedo e um estado pendente opcional para salvamentos.
- TextareaTexto de várias linhas que cresce suavemente conforme o que você escreve, entre um número mínimo e máximo de linhas, com contadores, validação e um atalho de envio.
Usados nos blocos Pro
Blocos para produtos de IA construídos com estes componentes.
- MarkdownRenderização de Markdown para respostas de IA. Cobre streaming sem sintaxe pela metade, tabelas que você pode copiar e citações inline.
- API keysA página de chaves de API de um produto de IA. Cobre um segredo mostrado só uma vez, revogar com desfazer e rotação com período de carência.
- NotificationsA seção Notificações das configurações de um produto de IA. Cobre uma grade de canal por evento, horas de silêncio e a permissão do navegador para push.
- SecurityA seção Segurança das configurações de um produto de IA. Cobre sessões, dois fatores com códigos de recuperação e exclusão atrás de uma confirmação digitada.
- BillingA página de plano e uso de um produto de IA. Cobre créditos que acabam no meio do ciclo, mudanças de plano com rateio e erros de cartão.
- ModelsA página Modelos das configurações de um produto de IA. Cobre o modelo e o esforço padrão, provedores e servidores próprios com teste de conexão.