Violin.css

# Form Toggle

Ready

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

`

    <!-- Default -->
    <div class="inv-form-toggle" data-error-message="">
        <div class="inv-form-toggle__container " data-status-message="Inativo">
            <label class="inv-toggle">
          <input type="checkbox"  >
          <span class="inv-toggle__slider "></span>
        </label>
        </div>
    </div>

    <!-- Default Accent -->
    <div class="inv-form-toggle" data-error-message="">
        <div class="inv-form-toggle__container " data-status-message="Inativo">
            <label class="inv-toggle">
          <input type="checkbox"  >
          <span class="inv-toggle__slider inv-toggle__slider--accent"></span>
        </label>
        </div>
    </div>

    <!-- Default Checked -->
    <div class="inv-form-toggle" data-error-message="">
        <div class="inv-form-toggle__container " data-status-message="Ativo">
            <label class="inv-toggle">
          <input type="checkbox" checked >
          <span class="inv-toggle__slider "></span>
        </label>
        </div>
    </div>

    <!-- Disabled -->
    <div class="inv-form-toggle" data-error-message="">
        <div class="inv-form-toggle__container inv-form-toggle__container--disabled" data-status-message="Inativo">
            <label class="inv-toggle">
          <input type="checkbox"  disabled>
          <span class="inv-toggle__slider "></span>
        </label>
        </div>
    </div>

    <!-- Disabled Checked -->
    <div class="inv-form-toggle" data-error-message="">
        <div class="inv-form-toggle__container inv-form-toggle__container--disabled" data-status-message="Ativo">
            <label class="inv-toggle">
          <input type="checkbox" checked disabled>
          <span class="inv-toggle__slider "></span>
        </label>
        </div>
    </div>

    <!-- Error -->
    <div class="inv-form-toggle" data-error-message="Cara, não pode ser assim">
        <div class="inv-form-toggle__container inv-form-toggle__container--error" data-status-message="Inativo">
            <label class="inv-toggle">
          <input type="checkbox"  >
          <span class="inv-toggle__slider "></span>
        </label>
        </div>
    </div>

    <!-- Error -->
    <div class="inv-form-toggle" data-error-message="Cara, não pode ser assim">
        <div class="inv-form-toggle__container inv-form-toggle__container--error" data-status-message="Ativo">
            <label class="inv-toggle">
          <input type="checkbox" checked >
          <span class="inv-toggle__slider "></span>
        </label>
        </div>
    </div>

`
`

    <div
      class="inv-form-toggle"
      data-error-message="{{ form-toggle.error-message }}">
      <div
        class="inv-form-toggle__container {{ form-toggle.modifier }}"
        data-status-message="{{ form-toggle.message }}"
      >
        {{> @toggle}}
      </div>
    </div>

`
`

    /* Default */
    {
      "form-toggle": {
        "message": "Inativo"
      }
    }

    /* Default Accent */
    {
      "form-toggle": {
        "message": "Inativo"
      },
      "toggle": {
        "modifier": "inv-toggle__slider--accent"
      }
    }

    /* Default Checked */
    {
      "form-toggle": {
        "message": "Ativo"
      },
      "toggle": {
        "checked": "checked"
      }
    }

    /* Disabled */
    {
      "form-toggle": {
        "modifier": "inv-form-toggle__container--disabled",
        "message": "Inativo"
      },
      "toggle": {
        "disabled": "disabled"
      }
    }

    /* Disabled Checked */
    {
      "form-toggle": {
        "modifier": "inv-form-toggle__container--disabled",
        "message": "Ativo"
      },
      "toggle": {
        "disabled": "disabled",
        "checked": "checked"
      }
    }

    /* Error */
    {
      "form-toggle": {
        "modifier": "inv-form-toggle__container--error",
        "message": "Inativo",
        "error-message": "Cara, não pode ser assim"
      }
    }

    /* Error */
    {
      "form-toggle": {
        "modifier": "inv-form-toggle__container--error",
        "message": "Ativo",
        "error-message": "Cara, não pode ser assim"
      },
      "toggle": {
        "checked": "checked"
      }
    }

`
File:

- Content:
  `

      .inv-form-toggle::after {
        content: attr(data-error-message);
        font-size: 12px;
        color: var(--color-accent--dark);
      }

      .inv-form-toggle__container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 40px;
        max-width: 239px;
        background-color: var(--color-system--white);
        outline: 1px;
        outline-color: var(--color-system--light);
        border: solid;
        border-color: var(--color-system--light);
        border-radius: 4px;
        box-sizing: border-box;
        border-width: 1px;
        padding-left: var(--space-16);
        padding-right: var(--space-8);
        font-weight: 600;
        color: var(--color-system--regular);
      }

      .inv-form-toggle__container::before {
        content: attr(data-status-message);
      }

      .inv-form-toggle__container--disabled {
        background-color: var(--color-default--white);
        border: none;
        color: var(--color-default--regular);
      }

      .inv-form-toggle__container--error {
        background-color: var(--color-error--white);
        border-color: var(--color-error--regular);
        border-width: 2px;
      }

  `
- URL: /components/raw/form-toggle/form-toggle.css
- Filesystem Path: src/components/form-toggle/form-toggle.css
- Size: 1 KB

- Handle: @form-toggle
- Variants (7): Default , Default Accent , Default Checked , Disabled , Disabled Checked , Error , Error
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/form-toggle/form-toggle.hbs
- References (1): @toggle

There are no notes for this item.