Input
Campo de texto de uma única linha.
Input é um wrapper fino, guiado por tokens, sobre o elemento <input> nativo. Ele herda todo atributo HTML padrão, então type, required, pattern, aria-* e integração com formulário funcionam imediatamente.
import { Input, Label } from '@uranus-workspace/design-system';
export default function InputDefault() {
return (
<div className="grid w-full max-w-sm gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="voce@uranus.com.br" />
</div>
);
}
Uso
import { Input, Label } from '@uranus-workspace/design-system';
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" name="email" required />
</div>Estados
- Padrão — habilitado, vazio ou preenchido.
- Desabilitado — use
disabled. Evite desabilitar inputs sem explicar o motivo por perto. - Inválido — defina
aria-invalid="true". A borda e o anel de foco viram destrutivos. Combine com uma mensagem de erro visível referenciada poraria-describedby.
import { Input, Label } from '@uranus-workspace/design-system';
export default function InputStates() {
return (
<div className="grid w-full max-w-sm gap-4">
<div className="grid gap-2">
<Label htmlFor="name">Padrão</Label>
<Input id="name" placeholder="Digite seu nome" />
</div>
<div className="grid gap-2">
<Label htmlFor="disabled">Desabilitado</Label>
<Input id="disabled" disabled defaultValue="Somente leitura" />
</div>
<div className="grid gap-2">
<Label htmlFor="invalid">Inválido</Label>
<Input
id="invalid"
aria-invalid="true"
defaultValue="email@inválido"
className="border-destructive focus-visible:ring-destructive"
/>
</div>
</div>
);
}
Acessibilidade
- Todo input precisa de um rótulo. Envelope em
<label>ou usearia-labelledby/aria-label. - Mensagens de erro pertencem à árvore acessível via
aria-describedby, não como tooltip. - Nunca dependa do placeholder como único rótulo — ele some quando o campo é preenchido.