Violin.css

# Form Text

Ready

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

`

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

    <!-- Error -->
    <div class="inv-form-text inv-form-text--error">
        Cara, nunca vi uma senha menos segura.
    </div>

    <!-- Success -->
    <div class="inv-form-text inv-form-text--success">
        Senha segura
    </div>

    <!-- Alert -->
    <div class="inv-form-text inv-form-text--alert">
        Senha segura
    </div>

`
`

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

`
`

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

    /* Error */
    {
      "form-text": {
        "value": "Cara, nunca vi uma senha menos segura.",
        "modifier": "inv-form-text--error"
      }
    }

    /* Success */
    {
      "form-text": {
        "value": "Senha segura",
        "modifier": "inv-form-text--success"
      }
    }

    /* Alert */
    {
      "form-text": {
        "value": "Senha segura",
        "modifier": "inv-form-text--alert"
      }
    }

`
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
- Variants (4): Default , Error , Success , Alert
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/form-text/form-text.hbs
- Referenced by (21): @form-field, @form-field--icon, @form-field--progress, @form-field--error, @form-field--disabled, @form-field-file, @form-field-file--active, @form-field-file--file-name, @form-field-file--long-file-name, @form-field-file--disabled, @form-field-file--error, @form-field-file--error-uploaded, @form-field-file--error-active, @form-field-map, @form-field-map--selected, @form-field-map--search-empty, @form-field-map--search-value, @form-field-map--search-disabled, @form-field-map--search-value-disabled, @form-field-map--search-empty-error, @form-field-map--search-value-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>

`