Example form input

example-form-input.markdown

Example form input

A Pen by Frank van Eldijk-Smeding on CodePen.

License.

index.html

<div class="container">
  <section aria-labelledby="dont-do-this">
    <h2 id="dont-do-this">Don't do this</h2>
    <input placeholder="Password" value="12345" type="password" class="error" />
  </section>

  <section aria-labelledby="do-this">
    <h2 id="do-this">
      Do this</h2>
    <label for="password_input">Password</label>
    <input id="password_input" type="password" value="12345" aria-invalid="true" />
    <p id="" class="error-message"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
      </svg>
      Enter a longer password</p>
  </section>

  </container>

  <!--   <section>
    <fieldset>
      <legend>Emulate vision deficiencies</legend>

      <div class="input-wrapper">
        <input type="radio" id="huey" name="drone" value="huey" checked>
        <label for="huey">Huey</label>
      </div>

      <div class="input-wrapper">
        <input type="radio" id="dewey" name="drone" value="dewey" >
        <label for="dewey">Dewey</label>
      </div>

      <div class="input-wrapper">
        <input type="radio" id="louie" name="drone" value="louie">
        <label for="louie">Louie</label>
      </div>
    </fieldset>
  </section> -->

script.js

const app = document.getElementsByTagName("body");

style.postcss

@use postcss-nested;
@use postcss-preset-env;
@import 'https://unpkg.com/@acab/reset.css';

:root {
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
}

html {
  height: 100%;
}

body {
  height: 100%;
  display: grid;
/*   grid-template-columns: 300px 300px; */
  place-content: center;
}

label, input {
  display: block;
}

input {
  padding: 8px 12px;
  border-radius: 4px;
  width: 100%;
}

.error {
  border: 1px solid var(--color-red-600);
}

[aria-invalid="true"] {
  border: 1px solid var(--color-red-600);
}

.error-message {
  color: var(--color-red-600);
}

fieldset {
  display: flex;
  flex-direction: column;
  
}

.container {
  display: grid;
}

.input-wrapper {
  display: flex;
/*   gap: 8px; */
}

.container {
  width: 320px;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr 1fr;
/*   gap: 12px;   */
  padding: 12px;
/*   background-color: lightgray; */
  border: 1px solid red;
  }

svg {
  width: 24px;
  height: 24px;
}

h2 {
}