Input

import { Input } from "@t2-educacao/midas";

UsoCopy Anchor Link

<Input type="email" placeholder="voce@email.com" aria-label="E-mail" />

Quase sempre o Input vai dentro de um Field, que traz label, descrição e mensagem de erro:

<Field>
  <FieldLabel htmlFor="email">E-mail</FieldLabel>
  <Input id="email" type="email" placeholder="voce@email.com" />
  <FieldDescription>Usamos para enviar seu certificado.</FieldDescription>
</Field>

PropsCopy Anchor Link

Aceita todas as props de <input> (type, value, onChange, placeholder, disabled, required...). type é "text" por padrão.

EstadosCopy Anchor Link

ExemplosCopy Anchor Link

ArquivoCopy Anchor Link

<Input id="foto" type="file" />

Com botão ao ladoCopy Anchor Link

<div className="flex gap-2">
  <Input placeholder="Buscar" aria-label="Buscar" />
  <Button>Buscar</Button>
</div>

Para ícone, prefixo ou botão dentro do campo, use InputGroup. Para um campo e um botão encostados, use ButtonGroup.

AcessibilidadeCopy Anchor Link

• Todo campo precisa de um nome: FieldLabel com htmlFor, ou aria-label.
• Para ligar a descrição ou o erro ao campo, use aria-describedby com o id do FieldDescription/FieldError.
• placeholder não substitui label.

Não façaCopy Anchor Link

• Usar o Input sem label visível em formulários.
• Mudar a altura com className para "caber" no layout: use os componentes de grupo.