Vebego Component Library

Radiobutton 

<!-- Default -->
<div class="atm-form-radiobutton ">
    <input type="radio" class="form-radiobutton" id="radiobutton" name="radiobutton">
    <label class="atm-form-label form-label " for="radiobutton">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.</label>

</div>


<!-- Checked -->
<div class="atm-form-radiobutton ">
    <input type="radio" class="form-radiobutton" id="radiobutton-checked" name="radiobutton-checked" checked>
    <label class="atm-form-label form-label " for="radiobutton-checked">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.</label>

</div>


<!-- Disabled -->
<div class="atm-form-radiobutton ">
    <input type="radio" class="form-radiobutton" id="radiobutton-disabled" name="radiobutton-disabled" disabled>
    <label class="atm-form-label form-label " for="radiobutton-disabled">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.</label>

</div>


<!-- Checked Disabled -->
<div class="atm-form-radiobutton ">
    <input type="radio" class="form-radiobutton" id="radiobutton-checked-disabled" name="radiobutton-checked-disabled" checked disabled>
    <label class="atm-form-label form-label " for="radiobutton-checked-disabled">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.</label>

</div>


<!-- Vacancy Submenu Style -->
<div class="atm-form-radiobutton vacancy-style">
    <input type="radio" class="form-radiobutton" id="radiobutton-vacancy-1" name="radiobutton-vacancy-group" value="option1" checked>
    <label class="atm-form-label form-label " for="radiobutton-vacancy-1">Meld je aan</label>

</div>


<div class="atm-form-radiobutton {{modifier}}">
  {{#if icon}}
    <input
      type="radio"
      id="{{name}}-{{value}}"
      name="{{name}}"
      value="{{value}}"
      class="peer hidden"
      {{#if checked}}checked{{/if}}
      {{#if disabled}}disabled{{/if}}
    >
    <label
      for="{{name}}-{{value}}"
      class="radiobutton-icon-wrapper"
    >
      {{render '@icon' icon merge=true}}
    </label>
  {{else}}
    <input
      type="radio"
      class="form-radiobutton"
      {{#if id}}id="{{id}}"{{/if}}
      {{#if name}}name="{{name}}"{{/if}}
      {{#if value}}value="{{value}}"{{/if}}
      {{#if checked}}checked{{/if}}
      {{#if disabled}}disabled{{/if}}>
    {{render '@label' label merge=true}}
  {{/if}}
</div>
 
/* Default */
{
  "modifier": "",
  "id": "radiobutton",
  "name": "radiobutton",
  "value": "",
  "checked": false,
  "disabled": false,
  "label": {
    "text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.",
    "for": "radiobutton"
  }
}


/* Checked */
{
  "modifier": "",
  "id": "radiobutton-checked",
  "name": "radiobutton-checked",
  "value": "",
  "checked": true,
  "disabled": false,
  "label": {
    "text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.",
    "for": "radiobutton-checked"
  }
}


/* Disabled */
{
  "modifier": "",
  "id": "radiobutton-disabled",
  "name": "radiobutton-disabled",
  "value": "",
  "checked": false,
  "disabled": true,
  "label": {
    "text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.",
    "for": "radiobutton-disabled"
  }
}


/* Checked Disabled */
{
  "modifier": "",
  "id": "radiobutton-checked-disabled",
  "name": "radiobutton-checked-disabled",
  "value": "",
  "checked": true,
  "disabled": true,
  "label": {
    "text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.",
    "for": "radiobutton-checked-disabled"
  }
}


/* Vacancy Submenu Style */
{
  "modifier": "vacancy-style",
  "id": "radiobutton-vacancy-1",
  "name": "radiobutton-vacancy-group",
  "value": "option1",
  "checked": true,
  "disabled": false,
  "label": {
    "text": "Meld je aan",
    "for": "radiobutton-vacancy-1"
  }
}
  • Content: 
    .atm-form-radiobutton {
    @apply flex items-center gap-2;

    .form-radiobutton {
        @apply text-cta;

        &[disabled] {
            @apply bg-shade;
            @apply text-shade;

            + .atm-form-label {
                @apply text-shade;
            }
        }

        &:checked {
            @apply bg-secondary-col-1;
        }
    }
}

.icon {
    @apply w-full;
    .radiobutton-icon-wrapper {
        @apply flex items-center justify-center;
        @apply py-1 md:py-3 rounded-md w-full;
        @apply bg-white border-4 border-solid border-white;
        @apply transition duration-300;
        @apply cursor-pointer;

        &:hover .atm-icon {
            @apply scale-110;
        }

        .atm-icon {
            @apply text-h5 md:text-h3 w-8 flex justify-center;
            @apply transition duration-300;
            @apply text-primary;
        }
    }

    /* Peer checked state */
    .peer:checked ~ .radiobutton-icon-wrapper {
        @apply border-[#eec4df];

        .atm-icon {
            @apply text-secondary-col-1;
        }
    }

    /* Houd rekening met disabled state */
    .peer:disabled ~ .radiobutton-icon-wrapper {
        @apply opacity-50 cursor-not-allowed;
    }
}
  • URL: /components/raw/radiobutton/radiobutton.css
  • Filesystem Path: src\components\02-atoms\forms\radiobutton\radiobutton.css
  • Size: 1.3 KB

No notes defined.