---
tags: "forms"
title: Forms
description: "Core form input components including text fields, labels, hints, and validation states. Foundation for all form-based user interactions."
---

.form-grid
  .form-group
    %label.form-label Input
    %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
  .form-group
    %label.form-label Input disabled
    %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
  .form-group
    %label.form-label Input with form hint
    %div
      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
      .form-hint Form-hint with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  .form-group
    %label.form-label
      %span Input with info popover
      %details.popover-wrapper.inline
        %summary
          .btn.btn-sm.btn-square
            .icon.icon-info
        .popover-menu.info
          .popover-title Popover title with a long sentence containing some Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
          .popover-content Popover content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
          .text-with-icon.mt-xs
            .icon.icon-lock.text-disabled
            .text-sm 0/100 Pushups completed
          .text-with-icon.mt-xs
            .icon.icon-unlock.text-success
            .text-sm 50/50 Squats completed
          .popover-actions
            %a.btn.btn-sm.btn-inverted{href:""} Learn more
    %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
  .form-group
    .field_with_errors
      %label.form-label Input with errors
    .field_with_errors
      %input.form-control{type:'text', value:""}
      .form-hint.error You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.form-grid.bg-black.p-3.mt-md
  .form-group.inverted
    %label.form-label Input
    %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
  .form-group.inverted
    %label.form-label Input disabled
    %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
  .form-group.inverted
    %label.form-label Input with form hint
    %div
      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
      .form-hint Form-hint with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  .form-group.inverted
    .field_with_errors
      %label.form-label Input with errors
    .field_with_errors
      %input.form-control{type:'text', value:""}
      .form-hint.error You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.