Campos de Formulário - Componentes

Input

O input permite que os usuários incluam e editem texto. Os inputs normalmente vem em forma de formulários e caixas de diálogo. Devem indicar com clareza que os usuários podem inserir informações, assim como devem ser claramente diferenciados uns dos outros de acordo com seus estados. Devem ajudar no entendimento das informações solicitadas e sinalizar afim de corrigir qualquer erro que venha a ser cometido pelo usuário na interface.

Label

Helper text

<div class="field">
  <label class="label">Label</label>
  <p class="control">
    <input class="input" type="text" placeholder="Placeholder">
  </p>
  <p class="help">Helper text</p>
</div>

Os inputs de texto possuem label (rótulo) fixa e usam um contêiner para fornecer clareza de interação. Os contêiners tornam os campos perceptíveis nos layouts, além de valorizar e aprimorar a descoberta, criando contraste entre o input e o conteúdo do componente.

O input de texto possui um preenchimento e um traço ao redor do contênier em sua borda. A cor e a espessura da borda devem mudar como indicativo quando houver interação com o campo de input. O texto da label deve manter-se fixo no componente.

Indicador de conteúdo opcional

Indique os campos opcionais utilizando a palavra “Opcional” entre parênteses ao lado da label.

Telefone (opcional)

<div class="field">
  <label class="label">Telefone (opcional)</label>
  <p class="control">
    <input class="input" type="text" placeholder="+55555555000">
  </p>
</div>

Anatomia do componente

Imagem que apresenta os elementos que formam um campo de formulário

1. Rótulo/Label

Usado para informar quais informações são solicitadas no input.

2. Texto de entrada/Placeholder

Informação inserida pelo usuário

3. Texto auxiliar/Helper text

Orientação sobre o campo de entrada; como ele será utilizado. Deve ocupar apenas uma linha, sendo visível sempre que for utilizado.

4. Contador de caracteres (ainda não disponível)

Contadores de caracteres ou palavras devem ser usados se houver um limite de caracteres ou palavras. Eles exibem a proporção de caracteres usados e o limite total de caracteres. Quando o limite é atingido,

5. Contêiner

Área delimitada para preenchimento das informações.

Estados dos campos de input

Padrão

Desabilitado

Ativo

Com erro

Carregando

<div class="field">
  <label class="label">Padrão</label>
  <p class="control">
    <input class="input" type="text" value="Padrão">
  </p>
</div>

<div class="field">
  <label class="label">Desabilitado</label>
  <p class="control">
    <input class="input" type="text" placeholder="Desabilitado" disabled>
  </p>
</div>

<div class="field">
  <label class="label">Ativo</label>
  <p class="control">
    <input class="input is-active" type="text" value="Ativo">
  </p>
</div>

<div class="field">
  <label class="label has-text-danger">Com erro</label>
  <p class="control">
    <input class="input is-danger" type="text" value="Com erro">
  </p>
</div>

<div class="field">
  <label class="label">Carregando</label>
  <p class="control is-loading">
    <input class="input" type="text" placeholder="Carregando...">
  </p>
</div>

Tag Input

Consulte a página Tag Input.

Checkbox e radio buttons

Para saber mais sobre Checkboxes, consulte essa documentação.

Para saber mais sobre Radio Buttons, consulte essa documentação.

Select

Caixa de seleção nativa de sistema, funcional, mas recomenda-se usar o componente Dropdown para dar múltiplas possibilidades de seleção para o usuário.

É possível simular um “placeholder” como um valor selecionado e invisível.

Selecione uma opção

<div class="field">
  <label class="label">Selecione uma opção</label>
  <div class="control">
    <div class="select">
      <select>
        <option hidden disabled selected>Escolha sua opção</option>
        <option>Opção A</option>
        <option>Opção B</option>
      </select>
    </div>
  </div>
</div>

Os componentes de seleção são usados para coletar informações fornecidas pelo usuário em uma lista de opções.

<div class="field">
  <div class="dropdown">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
        <span>Dropdown button</span>
        <span class="icon is-small">
          <i class="far fa-chevron-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu" role="menu">
      <div class="dropdown-content">
        <a class="dropdown-item">Dropdown item</a>
        <a class="dropdown-item is-active">Active dropdown item</a>
        <hr class="dropdown-divider">
        <a class="dropdown-item">With a divider</a>
      </div>
    </div>
  </div>
</div>

<div class="field">
  <div class="dropdown is-active">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
        <span>Dropdown button (.is-active)</span>
        <span class="icon is-small">
          <i class="far fa-chevron-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu" role="menu">
      <div class="dropdown-content">
        <a class="dropdown-item">Dropdown item</a>
        <a class="dropdown-item is-active">Active dropdown item</a>
        <hr class="dropdown-divider">
        <a class="dropdown-item">With a divider</a>
      </div>
    </div>
  </div>
</div>

Textarea

Message

Helper text

<div class="field">
  <label class="label">Message</label>
  <p class="control">
    <textarea class="textarea" placeholder="Textarea"></textarea>
  </p>
  <p class="help">Helper text</p>
</div>

Contador de caracteres (ainda não disponível) Contadores de caracteres ou palavras devem ser usados se houver um limite de caracteres ou palavras. Eles exibem a proporção de caracteres usados e o limite total de caracteres. Quando o limite de caracteres é atingido e o usuário segue tentando escrever, o componente deve sinalizar o erro e explicar como corrigí-lo.
Extensor de caixa de mensagens Deve ser usado quando não houver um limite de caracteres. Apesar da caixa de texto expandir automaticamente à medida que for necessário para comportar o texto digitado, deve-se dar ao usuário a opção de aumentar a caixa de texto manualmente.

Input com ação

Busca

Data

<div class="columns">
  <div class="column">
    <div class="field">
      <label class="label">Busca</label>
      <p class="control has-icons-right">
        <input class="input" type="text" placeholder="ex.: E-mail, Nome, Telefone">
        <a class="icon is-right is-action">
          <i class="far fa-search"></i>
        </a>
      </p>
    </div>
  </div>

  <div class="column">
    <div class="field">
      <label class="label">Data</label>
      <p class="control has-icons-right">
        <input class="input" type="date" value="2020-10-08">
        <a class="icon is-right is-action">
          <i class="far fa-calendar"></i>
        </a>
      </p>
    </div>
  </div>
</div>