Violin.css

# Form Text: Default

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="inv-form-text ">
        Texto de ajuda para o campo
    </div>

`
`

    <div class="inv-form-text {{ form-text.modifier }}">
      {{ form-text.value }}
    </div>

`
`

    {
      "form-text": {
        "value": "Texto de ajuda para o campo"
      }
    }

`
File:

- Content:
  `

      .inv-form-text {
        font-size: 12px;
        color: var(--color-default--dark);
      }

      .inv-form-text--error {
        color: var(--color-accent--dark);
      }

      .inv-form-text--success {
        color: var(--color-done--dark);
      }

      .inv-form-text--alert {
        color: var(--color-alert--dark);
      }

  `
- URL: /components/raw/form-text/form-text.css
- Filesystem Path: src/components/form-text/form-text.css
- Size: 263 Bytes

- Handle: @form-text--default
- Variants (4): Default , Error , Success , Alert
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/form-text/form-text.hbs
- Referenced by (10): @form-field, @form-field--icon, @form-field--progress, @form-field--error, @form-field--disabled, @input-file, @input-file--file-selected, @input-file--input-file-disabled, @input-file--input-file-required, @input-file--input-file-error

## Form Text

Utilizados para indicar um texto abaixo dos campos de formulário

Tendo a classe base `.inv-form-text`, podendo ser adicionado um texto através de uma `span` ou uma `div`

### Default Form Text

Texto de formulário padrão, comum para ações regulares dos usuários.

`

    <div class="inv-form-text">
      Sou um texto de formulário
    </div>

    <span class="inv-form-text">
      Sou um texto de formulário
    </span>

`

Modificadores | Uso
--- | ---
`.inv-form-text--error` | Modifica o form text com estilização de erro
`.inv-form-text--success` | Modifica o form text com estilização de sucesso
`.inv-form-text--alert` | Modifica o form text com estilização de alerta

### Error Form Text

Versão de erro.

`

    <div class="inv-form-text inv-form-text--error">
      Sou um texto de formulário com erro
    </div>

    <span class="inv-form-text inv-form-text--error">
      Sou um texto de formulário com erro
    </span>

`

### Success Form Text

Versão de sucesso.

`

    <div class="inv-form-text inv-form-text--sucess">
      Sou um texto de formulário com sucesso
    </div>

    <span class="inv-form-text inv-form-text--sucess">
      Sou um texto de formulário com sucesso
    </span>

`

### Alert Form Text

Versão de alerta.

`

    <div class="inv-form-text inv-form-text--alert">
      Sou um texto de formulário com alerta
    </div>

    <span class="inv-form-text inv-form-text--alert">
      Sou um texto de formulário com alerta
    </span>

`