ETR Component Library

form: Dropdown 

<form>
    <label class="font-normal font-sans text-black">Form Label</label>
    <select class="border-2 border-gray-light bg-white rounded block h-10 text-lg w-full mt-2">
    <option value="default">Choose an option</option>
    <option value="option-0">Option One</option>
    <option value="option-1">Option Two</option>
    <option value="option-2">Option Three</option>
    <option value="option-3">Option Four</option>
  </select>
    <label class=" font-sans text-gray-dark text-xs block pt-2">This is helper text</label>
</form>
 
<form>
  <label class="font-normal font-sans text-black">{{label}}</label>
  <select class="border-2 border-gray-light bg-white rounded block h-10 text-lg w-full mt-2">
    <option value="default">{{#if default}}{{default}}{{else}}Choose an option{{/if}}</option>
    {{#each option}}
    <option value="option-{{@index}}">{{label}}</option>
    {{/each}}
  </select>
  {{#if helper}}
    {{> @form--helper-text }}
  {{/if}}
</form>
 
{
  "label": "Form Label",
  "placeholder": "placeholder text",
  "option": [
    {
      "label": "Option One"
    },
    {
      "label": "Option Two"
    },
    {
      "label": "Option Three"
    },
    {
      "label": "Option Four"
    }
  ],
  "option-1": "Option One",
  "option-2": "Option Two",
  "option-3": "Option Three",
  "option-4": "Option Four",
  "helper": "This is helper text"
}
  • Content: 
    .form-label {
  @apply .text-black .font-bold;
}

.text-input,
.textarea,
.select {
  @apply .border .border-gray-light .bg-white .rounded;
}

.form-helper {
  @apply .text-gray-dark .text-xs .block .pt-1 .pl-2;
}

.radio__input {
  opacity: 0;
  position: absolute;
  cursor: pointer;

  &:hover + .radio__label:before {
    @apply bg-gray;
  }

  &:checked + .radio__label:after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 8px;
    left: 8px;
  }

  &:checked +.radio__label:before {
    @apply bg-primary-light;
  }
}

.radio__label {
  position: relative;

  &:before {
    display: inline-block;
    content: '';
    height: 24px;
    width: 24px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
    @apply bg-gray-light;

   }
}

.radio__label, .checkbox__label {
    height: 24px;
    display: inline-block;
    cursor: pointer;

    span {
      position: relative;
      top: 2px;
    }
  }

 .checkbox__input {
  opacity: 0;
  position: absolute;
  cursor: pointer;

  &:hover + .checkbox__label:before {
    @apply bg-gray;
  }

  &:checked +.checkbox__label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 9px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
   }

   &:checked + .checkbox__label:before {
     @apply bg-primary-light;
   }

 }

.checkbox__label {
  position: relative;
}

.checkbox__label:before {
  display: inline-block;
  content: '';
  height: 24px;
  width: 24px;
  vertical-align: middle;
  margin-right: 8px;
  @apply bg-gray-light;
}

.focus, [contentEditable=true]:focus, [href]:focus, [tabindex]:focus, button:not([disabled]):focus, iframe:focus, input:not([disabled]):focus, select:not([disabled]):focus, textarea:not([disabled]):focus {
  outline: 0;
  box-shadow: 0 0 0 3px theme('colors.primary.transparent');
}
  • URL: /components/raw/form/form.scss
  • Filesystem Path: components/03-form-components/form/form.scss
  • Size: 2 KB

There are no notes for this item.