JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<h2>
Reverse ordering for auto required/optional labelling
</h2>


<div class="form-group-rev">
  <input type="text" required id="name" aria-label="You gotta do it">
  <label for="name" aria-hidden="true">YOU GOTTA DO IT</label>
</div>


<div class="form-group-rev">
  <input type="text" id="email" aria-label="eh, its whatever">
  <label for="email" aria-hidden="true">eh, it's whatever</label>
</div>

SCSS

.form-group-rev {
  display: flex;
  flex-direction: column-reverse;
  padding: 1em;
  max-width: 300px;

  input[type="text"]:required {
    +label {
      &:after {
        content: '*';
        color: red;
      }
    }
  }
  
  input[type="text"]:not(:required) {
    +label {
      &:after {
        content: '(optional)';
        color: #777;
      }
    }
  }
  
}

.form-group {
  display: flex;
  flex-direction: column;
  padding: 1em;
  max-width: 300px;

  input[type="text"]:required {
    +label {
      &:after {
        content: '*';
        color: red;
      }
    }
  }
  
  input[type="text"]:not(:required) {
    +label {
      &:after {
        content: '(optional)';
        color: #777;
      }
    }
  }
  
}

body {
  font-family: sans-serif;
}

input {
  padding: 1.25em;
}

label {
  padding-bottom: .2em;
}

h2 {
  padding: 1rem;
  font-size: 1.2em;
}