# Form Control: Default

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <input class="form-control" type="text" placeholder="Type here…" />
    <select class="form-control">
        <option value="">Please choose</option>
        <option value="a">Option A</option>
        <option value="b">Option B</option>
    </select>
    <textarea class="form-control" rows="8"></textarea>

`
`

    <input class="form-control" type="text" placeholder="Type here…" />
    <select class="form-control">
        <option value="">Please choose</option>
        <option value="a">Option A</option>
        <option value="b">Option B</option>
    </select>
    <textarea class="form-control" rows="8"></textarea>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .form-control,
      .custom-form-control {
        @extend %heading-font-regular;

        display: block;

        width: 100%;
        padding: $spacer-xs;

        font-size: $font-size-base;
        line-height: $paragraph-line-height;

        transition: standard-transition(background-color);
      }

      .form-control {
        appearance: none;
        border: 2px solid $form-control-border-color;
        border-radius: 0;
        outline: none;
        caret-color: $form-control-caret-color;

        &::placeholder {
          color: $form-control-placeholder-color;
        }

        &:focus {
          color: $form-control-focus-color;
          background-color: $form-control-focus-bg;
        }

        &--invalid {
          border-color: $form-control-invalid-border-color;
        }
      }

      .custom-form-control {
        position: relative;
        min-height: ($paragraph-line-height * 1rem);
        transition: standard-transition(background-color, color, border-color);

        &.form-control--invalid,
        .form-group--invalid & {
          .form-label,
          .form-text {
            color: $form-control-invalid-border-color;
          }

          .form-label {
            &::before {
              border-color: $form-control-invalid-border-color;
            }
          }
        }

        // Hide the real input inside
        > .form-control__input {
          position: absolute;
          z-index: -1; // Put the input behind the label so it doesn't overlay text
          opacity: 0;
        }
      }

  `
- URL: /components/raw/form-control/_form-control.scss
- Filesystem Path: components/05-atoms/form-elements/form-control/_form-control.scss
- Size: 1.3 KB

- Handle: @form-control--default
- Variants (2): Default , Invalid
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/form-elements/form-control/form-control.html

No notes defined.