Componente

Forms

Estilos base e modificadores para todos os elementos de formulário do design system.

Form control

A classe .form-control aplica o estilo base a todos os elementos de formulário (input, select, textarea).

Modificadores

Classe CSS	Descrição
`.form-control`	`estilo base para todos os elementos de formulário`
`.form-control--error`	`destaca o elemento quando o valor é inválido`
`.form-control--disabled`	`estilo para elementos desabilitados`

Outras classes

Classe CSS	Descrição
`.form-legend`	`estilo padrão para o elemento <legend>`
`.form-label`	`estilo padrão para o elemento <label>`

Demo

Exemplo dos elementos de formulário com o estilo padrão do design system:

<form>
  <fieldset class="margin-bottom-md">
    <legend class="form-legend">Form Legend</legend>

    <div class="margin-bottom-sm">
      <div class="grid gap-sm">
        <div class="col-6@md">
          <label class="form-label" for="input-name">Name</label>
          <input class="form-control width-100%" type="text" name="input-name" id="input-name" required>
        </div>
        <div class="col-6@md">
          <label class="form-label" for="input-email">Email</label>
          <input class="form-control width-100%" type="email" name="input-email" id="input-email" placeholder="email@meu-email.com">
        </div>
      </div>
    </div>

    <div class="margin-bottom-sm">
      <label class="form-label" for="input-invalid">Inválido</label>
      <input class="form-control width-100%" type="text" name="input-invalid" id="input-invalid" aria-invalid="true" value="dado inválido">
    </div>

    <div>
      <label class="form-label" for="textarea">Textarea</label>
      <textarea class="form-control width-100%" name="textarea" id="textarea"></textarea>
    </div>
  </fieldset>

  <div class="text-right">
    <button class="btn btn--primary">Enviar</button>
  </div>
</form>

Temas

O sistema de cores do design system garante que os formulários tenham boa aparência nos temas claro e escuro sem nenhum código adicional. Se precisar sobrescrever estilos por tema, use o seletor [data-theme=dark]:

[data-theme=dark] .form-control {
  /* estilos específicos para o tema escuro */
}

Componentes adicionais

Radio/Checkbox customizados — substitua os controles nativos importando o componente Radio Checkbox Buttons.
Select customizado — para um select com estilo personalizado, importe o componente Custom Select.
Validação de formulário — para validar campos, utilize o componente Form Validator.