components
text-input
Campo de texto single-line com label, helper e estados de validação. Variante textarea pra multi-line.
overview
texto de ajuda
variantes
Text
Textarea
Select
estados
corrige isso
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| .input | class | — | text/email/password/number |
| .textarea | class | — | multi-line |
| .select | class | — | native select estilizado |
| .invalid | class | — | estado de erro |
| disabled | attr | — | desabilita |
| required | attr | — | obrigatório |
quando usar
use
não use
acessibilidade
- Label associado por for/id
- Helper antes do erro (não substituído)
- Erro associado por aria-describedby
- Required com required attribute
- Foco visível 2px
código
<div class="form-group">
<label class="form-label" for="email">email</label>
<input class="input" type="email" id="email" required>
<div class="form-helper">usaremos só pra contato</div>
</div>