Form: Default

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div class="form">
    <h2>Text-based inputs</h2>
    <div class="textfield">
        <label for="01">This is the textfield label</label>
        <input id="01" type="text" placeholder="This is the placeholder">
    </div>

    <div class="textfield">
        <label for="02">This is the email field label</label>
        <input id="02" type="email" placeholder="Your email here">
    </div>

    <div class="textfield">
        <label for="03">This is the number field label</label>
        <input id="03" type="number" placeholder="Your email here">
    </div>

    <div class="textfield">
        <label for="04">This is the password field label</label>
        <input id="04" type="password" placeholder="Your password here">
    </div>

    <div class="textfield">
        <label for="05">This is the search field label</label>
        <input id="05" type="search" placeholder="Search here">
    </div>

    <div class="textfield">
        <label for="06">This is the telephone field label</label>
        <input id="06" type="tel" placeholder="Your phone number here">
    </div>

    <div class="textfield">
        <label for="07">This is the url field label</label>
        <input id="07" type="url" placeholder="Enter a valid URL here" value="http://">
    </div>

    <div class="textfield">
        <label for="08">This is the textarea label</label>
        <textarea name="" id="08" cols="30" rows="10"></textarea>
    </div>

    <h3>Need to add</h3>
    <p>date, month, time, datetime, datetime-local, week</p>
</div>

<div class="form">
    <h2>Select</h2>
    <div class="select">
        <label for="09">This is the select field label</label>
        <select id="09">
      <option value="01">Option 1</option>
      <option value="02">Option 2</option>
      <option value="03">Option 3</option>
    </select>
    </div>

    <h3>Need to add </h3>
    <p>select[multiple]</p>
</div>

<div class="form">
    <h2>Checks</h2>
    <label for="cb-01" class="checkbox">
    <input id="cb-01" type="checkbox">
    This is an unchecked checkbox
  </label>

    <br>

    <label for="cb-02" class="checkbox">
    <input id="cb-02" type="checkbox" disabled>
    This is an unchecked checkbox
  </label>

    <br>

    <label for="radio-01" class="radio">
    <input type="radio" id="radio-01" name="radio-group-01">
    This is a radio button
  </label>
    <br>

    <label for="radio-02" class="radio">
    <input type="radio" id="radio-02" name="radio-group-01">
    This is a radio button
  </label>
    <br>

    <label for="radio-03" class="radio">
    <input type="radio" id="radio-03" name="radio-group-01" disabled>
    This is a radio button
  </label>

</div>


        <div class="form">
  <h2>Text-based inputs</h2>
  <div class="textfield">
    <label for="01">This is the textfield label</label>
    <input id="01" type="text" placeholder="This is the placeholder">
  </div>

  <div class="textfield">
    <label for="02">This is the email field label</label>
    <input id="02" type="email" placeholder="Your email here">
  </div>

  <div class="textfield">
    <label for="03">This is the number field label</label>
    <input id="03" type="number" placeholder="Your email here">
  </div>

  <div class="textfield">
    <label for="04">This is the password field label</label>
    <input id="04" type="password" placeholder="Your password here">
  </div>

  <div class="textfield">
    <label for="05">This is the search field label</label>
    <input id="05" type="search" placeholder="Search here">
  </div>

  <div class="textfield">
    <label for="06">This is the telephone field label</label>
    <input id="06" type="tel" placeholder="Your phone number here">
  </div>

  <div class="textfield">
    <label for="07">This is the url field label</label>
    <input id="07" type="url" placeholder="Enter a valid URL here" value="http://">
  </div>

  <div class="textfield">
    <label for="08">This is the textarea label</label>
    <textarea name="" id="08" cols="30" rows="10"></textarea>
  </div>

  <h3>Need to add</h3>
  <p>date, month, time, datetime, datetime-local, week</p>
</div>

<div class="form">
  <h2>Select</h2>
  <div class="select">
    <label for="09">This is the select field label</label>
    <select id="09">
      <option value="01">Option 1</option>
      <option value="02">Option 2</option>
      <option value="03">Option 3</option>
    </select>
  </div>

  <h3>Need to add </h3>
  <p>select[multiple]</p>
</div>

<div class="form">
  <h2>Checks</h2>
  <label for="cb-01" class="checkbox">
    <input id="cb-01" type="checkbox">
    This is an unchecked checkbox
  </label>
  
  <br>

  <label for="cb-02" class="checkbox">
    <input id="cb-02" type="checkbox" disabled>
    This is an unchecked checkbox
  </label>

  <br>

  <label for="radio-01" class="radio">
    <input type="radio" id="radio-01" name="radio-group-01">
    This is a radio button
  </label>
  <br>

  <label for="radio-02" class="radio">
    <input type="radio" id="radio-02" name="radio-group-01">
    This is a radio button
  </label>
  <br>
  
  <label for="radio-03" class="radio">
    <input type="radio" id="radio-03" name="radio-group-01" disabled>
    This is a radio button
  </label>

</div>
{# // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
// https://purecss.io/forms/ #}


        
            
            /* No context defined for this component. */

File:

Content:


                                .u-button {
  /* Structure */
  display: inline-block;
  zoom: 1;
  line-height: normal;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  box-sizing: border-box;
  font-size: 100%;
  font-family: inherit;
  text-decoration: none;

  &:focus { outline: 0; }

  /* Firefox: Get rid of the inner focus border */
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
}

.u-button-reset {
  /* Structure */
  display: inline-block;
  zoom: 1;
  line-height: normal;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  box-sizing: border-box;
  text-decoration: none;
  background-color: transparent;
  border: 0;

  &:focus { outline: 0; }

  /* Firefox: Get rid of the inner focus border */
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
}

.u-button[disabled],
.u-button[disabled]:hover,
.u-button[disabled]:focus,
.u-button[disabled]:active,
.button--disabled,
.button--disabled:hover,
.button--disabled:focus,
.button--disabled:active {
  filter: alpha(opacity=40);
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.button--hidden { display: none; }

// Resets all button-like elements.
// input[type="button"],
// input[type="submit"],
// input[type="reset"],
// button,
.button { @extend .u-button; }


input[type="button"].button--unstyled,
input[type="submit"].button--unstyled,
input[type="reset"].button--unstyled,
button.button--unstyled,
.button.button--unstyled {
  background-color: transparent;
  border: 0;
}

URL: /components/raw/form/button-structure.scss
Filesystem Path: src/components/02-elements/form/button-structure.scss
Size: 1.7 KB

Content:


                                .u-button {
  --button-hsl: var(--theme-hsl);
  border-radius: 2px;
  padding: 0.5em 1.5em 0.75em;
  font-weight: 400;
  border: 1px solid hsla(var(--button-hsl), 1);
  color: hsla(var(--button-hsl), 1);
  background-color: transparent;

  &:hover,
  &:focus { background-image: linear-gradient(hsla(var(--button-hsl), 0.05), hsla(var(--button-hsl), 0.05)); }

  &:active {
    background-image: linear-gradient(hsla(var(--button-hsl), 0.15), hsla(var(--button-hsl), 0.15));
    border-color: hsla(var(--button-hsl), 1);
  }
}

.button--navy   { --button-hsl: var(--navy-hsl); }
.button--yellow { --button-hsl: var(--yellow-hsl); }
.button--red    { --button-hsl: var(--red-hsl); }
.button--green  { --button-hsl: var(--green-hsl); }
.button--purple { --button-hsl: var(--purple-hsl); }

.button--large {
  padding: .6em .9em .7em;
  font-size: 120%;
}

.button--small {
  padding: 0.4em .8em .5em;
  font-size: 80%; 
}

input[type="button"].button--primary,
input[type="submit"].button--primary,
input[type="reset"].button--primary,
button.button--primary,
.button.button--primary {
  color: white;
  border: 1px solid hsla(var(--button-hsl), 1);
  background-color: hsla(var(--button-hsl), 1);

  &:hover,
  &:focus { background-image: linear-gradient(hsla(0,0%,0%, 0.15), hsla(0,0%,0%, 0.25)); }
}

input[type="button"].button--secondary,
input[type="submit"].button--secondary,
input[type="reset"].button--secondary,
button.button--secondary,
.button.button--secondary {
  background-color: transparent;
  color: hsla(var(--button-hsl), 1);
  border: 1px solid hsla(var(--button-hsl), 1);

  &:hover,
  &:focus { background-image: linear-gradient(hsla(var(--button-hsl), 0.15), hsla(var(--button-hsl), 0.15)); }
}

input[type="button"].button--unstyled,
input[type="submit"].button--unstyled,
input[type="reset"].button--unstyled,
button.button--unstyled,
.button.button--unstyled { color: hsla(var(--button-hsl), 1); }

URL: /components/raw/form/button-visuals.scss
Filesystem Path: src/components/02-elements/form/button-visuals.scss
Size: 1.9 KB

Content:


                                // Config Variables

.form {
  // Color variables
  --icon-color: var(--primary-hsl);
  --text-color: var(--blue-hsl);
  --border-color: var(--primary-hsl);
  --shadow-color: var(--default-hsl);
  --focus-color: var(--accent-hsl);
  --invalid-color: var(--red-hsl);
  --valid-color: var(--success-green-hsl);
  --button-color: var(--blue-hsl);

  // Visual Variables
  --border: 1px solid hsla(var(--border-color), .6);
  --shadow: none;
  --padding: 0.5em 0.6em;
  --border-radius: 2px;
  --font-weight: 100;
}

.form {
  // Resets the appearance of all inputs
  input {
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    outline: 0;
  }

  // Structural styles for all text based form elements
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="url"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="week"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  select,
  textarea {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: 100%;
  }
  
  // Adds compatibility for IE8 (pulled from Puse-CSS)
  input:not([type]) {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
  }

  // Deletes the outline used by chorme on focus
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="url"]:focus,
  input[type="date"]:focus,
  input[type="month"]:focus,
  input[type="time"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="week"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="color"]:focus,
  select:focus,
  textarea:focus,
  input:not([type]):focus { outline: 0; }

  // Sets the cursor with a forbidden sign for when the input is disabled
  input[type="text"][disabled],
  input[type="password"][disabled],
  input[type="email"][disabled],
  input[type="url"][disabled],
  input[type="date"][disabled],
  input[type="month"][disabled],
  input[type="time"][disabled],
  input[type="datetime"][disabled],
  input[type="datetime-local"][disabled],
  input[type="week"][disabled],
  input[type="number"][disabled],
  input[type="search"][disabled],
  input[type="tel"][disabled],
  input[type="color"][disabled],
  select[disabled],
  textarea[disabled] { cursor: not-allowed; }
}

// Visual Styles
.form {
  // visual styles for text-based elements while disabled
  input[type="text"][disabled],
  input[type="password"][disabled],
  input[type="email"][disabled],
  input[type="url"][disabled],
  input[type="date"][disabled],
  input[type="month"][disabled],
  input[type="time"][disabled],
  input[type="datetime"][disabled],
  input[type="datetime-local"][disabled],
  input[type="week"][disabled],
  input[type="number"][disabled],
  input[type="search"][disabled],
  input[type="tel"][disabled],
  input[type="color"][disabled],
  select[disabled],
  textarea[disabled],
  input:not([type])[disabled] { opacity: .4; }

  input:focus:invalid,
  textarea:focus:invalid,
  select:focus:invalid { border-color: hsla(var(--invalid-color), .7); }

  input:focus:valid,
  textarea:focus:valid,
  select:focus:valid { border-color: hsla(var(--valid-color), 1); }

  // All styles for the select element. 
  // All of the visual attributes are controlled by CSS variables 
  // at the beginning of this file.
  // SEE MORE ON FORM COMPONENTS

  select {
    /* Normalizes the height; padding is not sufficient. */
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    height: 2.25em;
  }
  
  select[multiple] { height: auto; }
}

.textfield,
.select {
  > label {
    width: 100%;
    display: inline-block;
  }
}

// Select component

.select {
  position: relative;
  
  &::after {
    position: absolute;
    right: 0;
    content: "keyboard_arrow_down";
    width: 1em;
    margin-right: 8px;
    margin-top: 6px;
    @extend .u-material-icons;
  }
}

// Accessibility 
.checkbox,
.radio {
  input[type=checkbox],
  input[type=radio] {
    /* Adjusts the position of the checkboxes on the text baseline */ 
    vertical-align: -5px;
    
    &::before {
      width: 1em;
      margin-right: 8px;
      @extend .u-material-icons;
    }  

    &:disabled::before {
      // Preventing the interaction in the disabled field
      pointer-events: none;
      opacity: .3;
    }

    /* Set here so that Windows' High-Contrast Mode can override */
      color: var(--icon-color);
  }

  input[type=checkbox] {
    &::before { content: "check_box_outline_blank"; }
    &:checked::before { content: "check_box_outline"; }
  }

  input[type=radio] {
    &::before { content: "radio_button_unchecked"; }
    &:checked::before { content: "radio_button_checked"; }
  }
}

.form {
  .button,
  button,
  input[type="button"] {
    @extend .u-button;
  }
}

URL: /components/raw/form/form-structure.scss
Filesystem Path: src/components/02-elements/form/form-structure.scss
Size: 5 KB

Content:


                                // Config Variables

.form {
  // Color variables
  --icon-color: var(--primary-hsl);
  --text-color: var(--blue-hsl);
  --border-color: var(--primary-hsl);
  --shadow-color: var(--default-hsl);
  --focus-color: var(--accent-hsl);
  --invalid-color: var(--red-hsl);
  --valid-color: var(--success-green-hsl);
  --button-color: var(--blue-hsl);

  // Visual Variables
  --border: 1px solid hsla(var(--border-color), .6);
  --shadow: none;
  --padding: 0.5em 0.6em;
  --border-radius: 2px;
  --font-weight: 100;
}

// Visual Styles
.form {
  // Resets the appearance of all inputs
  input { color: var(--text-color); }

  // Visual Styles for the text based elements
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="url"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="week"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  select,
  textarea,
  input:not([type]) {
    padding: var(--padding);
    border: var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);

    @include placeholder {
      color: hsla(var(--text-color), .6);
      font-family: var(--fonts-primary);
      font-weight: var(--font-weight);
    }
  }
  
  // visual styles for text-based elements on focus
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="url"]:focus,
  input[type="date"]:focus,
  input[type="month"]:focus,
  input[type="time"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="week"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="color"]:focus,
  select:focus,
  textarea:focus,
  input:not([type]):focus { 
    border-color: hsla(var(--focus-color), .8);
    background-color: hsla(var(--focus-color), .03); 
  }

  // All styles for the select element. 
  // All of the visual attributes are controlled by CSS variables 
  // at the beginning of this file.
  // SEE MORE ON FORM COMPONENTS

  select {
    border: var(--border);
    background-color: white;
    font-family: var(--fonts-primary);
    font-weight: var(--font-weight);
    color: var(--text-color);
    min-height: 2.4rem;
    height: auto;
  }
}


// Starts the Form Components, where we bundle together the 
// Label and the inputs, and the .select component

.textfield,
.select {
  > label {
    padding: var(--padding);
    color: hsla(var(--text-color), 1);
  }
}

.textfield,
.select {
  > label {
    width: 100%;
    display: inline-block;
  }
}

// Select component
.select {
  --padding: var(--s-1) var(--s1);

  &::after {
    color: hsla(var(--icon-color), 1);
    margin-top: 8px; 
    pointer-events: none;
  }
}

// Accessibility 
.checkbox,
.radio {
  input[type=checkbox],
  input[type=radio] {
    &::before {
      color: hsla(var(--icon-color), 1);
    }  

    /* Set here so that Windows' High-Contrast Mode can override */
    color: var(--icon-color);
  }
}

URL: /components/raw/form/form-visual.scss
Filesystem Path: src/components/02-elements/form/form-visual.scss
Size: 3.1 KB

Handle: @form--default
Variants (2): Default , Buttons
Preview:
- With layout
- Component only
Filesystem Path: src/components/02-elements/form/form.njk

There are no notes for this item.

Form: Default

Form

Logo

Wrapper

Card

Hero

Product Card

Product Hero

Prose

Article

Product Page